在很多WEB开发的时候我们都需要用到透明遮罩层来实现某些功能。下面共享一下比较实用的代码；
JS代码：
<script language="javascript" type="text/javascript">
//创建一个遮罩层
function Layer(html)
{
//创建一个遮罩层，半透明
var lay = document.createElement("div");
lay.id = "frame"
with(lay.style)
{
width = "100%";
height = String(Math.max(document.documentElement.clientHeight,document.documentElement.scrollHeight))+"px";
background = "#000000";
position = "absolute";
left = "0";
top = "0";
filter = 'Alpha(opacity=70)';
opacity = '0.7';
}
document.body.appendChild(lay);
document.getElementById("frame").ondblclick = hiddenDiv;
//创建显示内容
var info = document.createElement("div");
info.id = "msg";
info.innerHTML = html;
document.getElementById("frame").appendChild(info);
with(info.style)
{
position = "absolute";
left = "0px";
top = document.documentElement.scrollTop + document.body.scrollTop + "px";
marginLeft = (document.documentElement.clientWidth - info.offsetWidth)/2 + "px";
marginTop = (document.documentElement.clientHeight - info.offsetHeight)/2 + "px";
}
document.body.appendChild(info);
}
//关闭遮罩层
function hiddenDiv(){document.body.removeChild(document.getElementById("frame"));document.body.removeChild(document.getElementById("msg"));}
function loadIndex(){
Layer("<b>Cawei</b>");
}
</script>
HMTL代码：
<body onload="loadIndex()">
<table><tr><td>伟博小城</td></tr><tr><td><select><option>www.webczw.com</option><option>遮罩层</option></select></td></tr></table>
</body>