jsp 创建 覆盖层DIV 如何创建 【源代码】
日期：2014-05-16 浏览次数：20417 次
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";
}
自己写的一个脚本：
把下面这几个脚本和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";
}
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
