css实现遮罩
<style tyle="text/css">
.zhezhao{
z-index:0px; 层深度
position:absolute;//必须为绝对定位
left:50px;
top:50px; 位置及大小
width:200px;
height:400px;
background-color: #191919;
filter: Alpha(Opacity=70);
opacity: 0.7; 遮罩颜色及程度
-moz-opacity: 0.7;
}
.content{
z-index:1px;
}
</style>
<div class="zhezhao"><div class="content">ok!</div></div>
js实现遮罩
<style type="text/css">
.content{z-index:1px; }
</style>
<script type="text/javascript">
function dG(id)
{
return document.getElementById(id);
}
function cE(id)
{
return document.createElementById(id);
}
//创建显示遮照层
function createZheZhao() {
if (dG("cover_id")) {//有遮照层
dG("cover_id").style.display = "block";
}
else {//否则创建遮照层
var coverDiv = cE("div");
document.body.appendChild(coverDiv);
coverDiv.id = "cover_id";
with (coverDiv.style) {
position = 'absolute';
background = '#CCCCCC';
var bodysize = getBodySize();
left = '0px';
top = '0px';
height = bodysize[1];
width = bodysize[0];
zIndex = 0;
}
}
}
//获取窗体的长、宽
function getBodySize() {
var bodySize = [];
with (document.documentElement) {
bodySize[0] = (scrollWidth > clientWidth) ? scrollWidth : clientWidth;
bodySize[1] = (scrollHeight > clientHeight) ? scrollHeight : clientHeight;
}
return bodySize;
}
function quxiao()
{
dG("cover_id").style.display = "none";
}
</script>