前端遮罩层实现_遮罩层的实现(纯js兼容版)

这个代码是我以前测试时候的代码了，主要用到的知识点是opacity和filer分别实现

“标准浏览器”和IE浏览器下的半透明，使用js的document.body.offsetwidth

和screen.height来控制遮罩层的宽高，通过element.style.display属性来控制

遮罩层显示与否

HTML遮罩层，背景半透明，只显示中间部分

#msgDiv {

z-index:10001;

width:500px;

height:400px;

background:white;

border:#336699 1px solid;

position:absolute;

left:50%;

top:20%;

font-size:12px;

margin-left:-225px;

display: none;

}

#bgDiv {

display: none;

position: absolute;

top: 0px;

left: 0px;

right:0px;

background-color: #777;

filter:progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75);

opacity: 0.6;

}

function showDetail(){//show detail

//msgDiv

var msgDiv = document.getElementById("msgDiv");

msgDiv.style.marginTop = -75 + document.documentElement.scrollTop + "px";

//bgDiv

var bgDiv = document.getElementById("bgDiv");

bgDiv.style.width = document.body.offsetwidth + "px";

bgDiv.style.height = screen.height + "px";

//msgShut

var msgShut = document.getElementById("msgShut");

msgShut.onclick = function(){

bgDiv.style.display = msgDiv.style.display = "none";

}

//content

msgDiv.style.display = bgDiv.style.display = "block";

var msgDetail = document.getElementById("msgDetail");

msgDetail.innerHTML = "

显示框中的内容

";

}

关闭

点击我看看