本文介绍了一个用于网页的遮罩层和弹出窗口的JavaScript脚本实现方法，包括自适应屏幕尺寸的功能。该脚本适用于IE和Firefox浏览器，并提供了一种简单的方式通过页面元素触发弹窗显示和关闭。
function Open(){
//隐藏select控件
DispalySelect(0);
//显示遮罩层
$("divPageMask").style.display="block";
//处理遮罩层
resizeMask();
window.onResize = resizeMask;
//显示弹出窗口
$("divOpenWin").style.display="block";
}
function Close(){
//显示select控件
DispalySelect(1);
//处理遮罩层
var m = $("divPageMask");
m.style.width = "0px";
m.style.height = "0px";
var o = $("divOpenWin");
o.style.display = "none";
window.onResize = null;
o.style.display="none";
}
//页面遮罩
function resizeMask(){
var m = $("divPageMask");
m.style.width = document.documentElement.clientWidth+'px';
m.style.height = resizeHeight()+'px';
var o = $("divOpenWin");
o.style.left = ((document.documentElement.clientWidth - 600) / 2)+'px';
o.style.top = ((document.documentElement.clientHeight - 400) / 2)+'px';
}
function DispalySelect(val){
//显示和隐藏select控件
var dispalyType;
var arrdispalyType=["hidden","visible"];
var arrObjSelect=document.getElementsByTagName("select");
for (i=0;i<arrObjSelect.length;i++){
arrObjSelect[i].style.visibility=arrdispalyType[val];
}
}
function resizeHeight(){
var ch = document.documentElement.clientHeight;
var oh = document.documentElement.scrollHeight;
if(ch>oh){ return ch;}else{ return oh}
}
此脚本只适用于如下的DOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
在IE和FireFox下均正常
HTML:
<div id="divPageMask"></div>
<div id="divOpenWin">
内容区域<a href="javascript:Close();">Close</a>
</div>
具体适用方式是：可以通过页面上的某个按钮和超链接触发脚本的Open方法，然后在内容区写上关闭的方法就行了。
上面代码来自网络，感谢贡献者，只是自己增加了resizeHeight方法，因为如果按作者原来的写法只能遮罩文档大小，如果文档内容小于屏幕高度，则不会遮罩下部分，resizeHeight通过比较当前是取文档高度还是屏幕高度。另外要注意的是在设置height和width时要加上px，否则firefox就不认了。
另外别忘记两个div的样式，具体怎么做，你自己修改就行了
#divPageMask{
background-color:#000000;
filter:alpha(opacity=50);
-moz-opacity:.5;
opacity:0.5;
left:0px;
position:absolute;
top:0px;
}
#divOpenWin{background-color:#FFFFFF;position: absolute;left:0px;top:0px;display: none;z-index:50; width:700px;height:auto}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
