用DIV实现WEB页面蒙板效果-技术开发专区

用DIV实现WEB页面蒙板效果

作者：ITPUB论坛编辑： nancy 2008-04-28 00:00

【IT168技术文档】

见有些网页上的Div蒙板效果不错，忍不住手痒，自己写了个并简单封装了一下。在IE6和FireFox2下测试通过。
先看效果演示：

空白页面上有个按钮，作用是单击它时显示蒙板效果。

下面是单击后显示的黑色半透明蒙板效果，之间嵌入要突出显示的内容。如果用户拖动滚动条，中间Div会自动跟随，永远在用户可视区域内。

首先是HTML页面的调用代码

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript" src="/Admin/Script/maskDialog.js" ></script>
<link rel="stylesheet" href="css.css" />
<script type="text/javascript">
window.onload=function(){MaskDialog.mainForm=document.getElementById("msg");}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button" onclick="MaskDialog.show();" value="show mask layer" />
<div id="msg">just a test</div>
</div>
</form>
</body>
</html>

核心代码就几行

//这行用来绑定控件
window.onload=function(){MaskDialog.mainForm=document.getElementById("msg");}
//这行用来显示蒙板效果
MaskDialog.show();
//这行用来吟唱蒙板效果
MaskDialog.hide();

现在贴js的源码

function maskDialog()
{
// public properties start
    this.mainForm;
this.top="30";
// public properties end

this.showStatus=false;
if(typeof this.mainForm != "#ff0000" && this.mainForm != null)
{
this.mainForm.style.display="none";
}
if(window.onresize)
{
var evt=window.onresize;
window.onresize=function(){evt(); MaskDialog.resize();};
}
else
{
window.onresize=function(){MaskDialog.resize();};
}
if(window.onscroll)
{
var evt=window.onscroll;
window.onscroll=function(){evt(); MaskDialog.scroll();};
}
else
{
window.onscroll=function(){MaskDialog.scroll();};
}
//隐藏蒙板效果
    this.hide=function()
{
var mask=document.getElementById("div_Mask");
if(typeof mask != "undefined" && mask!=null)
{
var body = document.getElementsByTagName("body")[0];
body.removeChild(mask);
}
var ifr=document.getElementById("ifr_Mask");
if(typeof ifr != "undefined" && ifr!=null)
{
var body = document.getElementsByTagName("body")[0];
body.removeChild(ifr);
}
if(typeof this.mainForm != "undefined" && this.mainForm != null)
{
this.mainForm.style.display="none";
}
this.showStatus=false;
};
//显示蒙板效果
    this.show=function()
{
var body = document.getElementsByTagName("body")[0];
var pageDimensions=this.getPageDimensions();
var sheet = document.createElement("div");
sheet.setAttribute("id","div_Mask");
sheet.style.position="absolute";
sheet.style.left="0px";
sheet.style.top="0px";
sheet.style.zIndex="999";
sheet.style.width=pageDimensions[0] + "px";
sheet.style.height=pageDimensions[1] + "px";
var ifr = document.createElement("iframe");
ifr.setAttribute("id","ifr_Mask");
ifr.style.position="absolute";
ifr.style.display="block";
ifr.style.zIndex="998";
ifr.width=pageDimensions[0];
ifr.height=pageDimensions[1];
ifr.scrolling="no";
ifr.frameborder="0";
ifr.style.left="0px";
ifr.style.top="0px";
body.appendChild(ifr);
body.appendChild(sheet);
if(typeof this.mainForm != "undefined" && this.mainForm != null)
{
this.mainForm.style.display="block";
this.mainForm.style.zIndex="1000";
}
this.showStatus=true;
this.scroll();
};
this.resize=function()
{
if(this.showStatus==false)
{
return;
}
var mask=document.getElementById("div_Mask");
var ifr=document.getElementById("ifr_Mask");
if(typeof mask != "undefined" && mask != null && typeof ifr != "undefined" && ifr != null )
{
var body = document.getElementsByTagName("body")[0];
var pageDimensions=this.getPageDimensions();
mask.style.width=pageDimensions[0] + "px";
mask.style.height=pageDimensions[1] + "px";
ifr.width=pageDimensions[0];
ifr.height=pageDimensions[1];
this.scroll();
}
};
this.scroll=function()
{
if(this.showStatus==false)
{
return;
}
if(typeof this.mainForm != "undefined" && this.mainForm != null)
{
var pageDimensions=this.getPageDimensions();
this.mainForm.style.position="absolute";
this.mainForm.style.top=document.documentElement.scrollTop + "px";
if(typeof this.mainForm.style.width == "undefined" || this.mainForm.style.width=="")
{
this.mainForm.style.width=pageDimensions[0] /2 + "px";
}
var newLeft= pageDimensions[0] / 2 - parseInt(this.mainForm.style.width,10) /2
var newTop= document.documentElement.scrollTop + parseInt(this.top);
this.mainForm.style.left= newLeft + "px";
this.mainForm.style.top= newTop + "px";
}
};
this.getPageDimensions=function()
{
var body = document.getElementsByTagName("body")[0];
var bodyOffsetWidth = 0;
var bodyOffsetHeight = 0;
var bodyScrollWidth = 0;
var bodyScrollHeight = 0;
var pageDimensions = [0,0];
pageDimensions[0]=document.documentElement.clientWidth;
pageDimensions[1]=document.documentElement.clientHeight;
bodyOffsetWidth=body.offsetWidth;
bodyOffsetHeight=body.offsetHeight;
bodyScrollWidth=body.scrollWidth;
bodyScrollHeight=body.scrollHeight;
if(bodyOffsetWidth > pageDimensions[0])
{
pageDimensions[0]=bodyOffsetWidth;
}
if(bodyOffsetHeight > pageDimensions[1])
{
pageDimensions[1]=bodyOffsetHeight;
}
if(bodyScrollWidth > pageDimensions[0])
{
pageDimensions[0]=bodyScrollWidth;
}
if(bodyScrollHeight > pageDimensions[1])
{
pageDimensions[1]=bodyScrollHeight;
}
return pageDimensions;
};
return true;
}
var MaskDialog=new maskDialog();

关注我们