这个代码是我以前测试时候的代码了,主要用到的知识点是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 = "
显示框中的内容
";}