日期:2014-05-16  浏览次数:20377 次

jsp 创建 覆盖层DIV 怎么创建 【源代码】
自己写的一个脚本:

把下面这几个脚本和jsp代码放在你的jsp页面调用createDIV 方法就okl了


引用

<script type="text/javascript">
function createDIV(content) {
document.getElementById("DetailLayer").innerHTML = content;
var DetailLayer = document.getElementById("DetailLayer");
var webBgLayer = document.getElementById("webBgLayer");
// ShopConfirmLayer.innerHTML=str;
DetailLayer.style.display = "";//显示内容层,显示覆盖层

webBgLayer.style.display = "";
webBgLayer.style.width = document.documentElement.scrollWidth + 900 + "px"; //为覆盖层设置宽度
webBgLayer.style.height = document.documentElement.scrollHeight + 1600
+ "px"; //为覆盖层设置高度

DetailLayer.style.left = ((webBgLayer.style.width - 726) / 2) + "px";
DetailLayer.style.top = Math
.abs(parseInt((document.documentElement.clientHeight - ShopConfirmLayer.offsetHeight) / 2))
+ document.documentElement.scrollTop + "px"; //为内容层设置位置
}
</script>



<!--信息内容层-->

<div id="DetailLayer"
style="position: absolute; top: 0px; left: 100px; z-index: 900; width: 726px; display: none; background-color: white">
<img src="jslib/mytable/images/loader.gif"><!--加载时候显示图片-->
<input name="button1" value="关闭" type="button" onclick="CloseDetail()" />
</div>

<!--覆盖层-->
<div id="webBgLayer"
style="position: absolute; top: 0px; left: 0px; z-index: 899; background-color: gray; height: 100%; width: 100%; display: none; -moz-opacity: 0.9; filter: alpha(opacity =50);">
</div>


function CloseDetail() { //关闭 层
var DetailLayer = document.getElementById("DetailLayer");
var webBgLayer = document.getElementById("webBgLayer");
DetailLayer.style.display = "none";
webBgLayer.style.display = "none";

}