Div+CSS实现始终居中的半透明弹出层
别告诉我有Bug 2011-10-10
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>Div+CSS实现始终居中的半透明弹出层</title>
<styletype="text/css">
<!--
html,body{height:100%;margin:0px;font-size:12px;}
.mydiv{
background-color:#FFCC66;
border:1pxsolid#f00;
text-align:center;
line-height:40px;
font-size:12px;
font-weight:bold;
z-index:999;
width:300px;
height:120px;
left:50%;
top:50%;
margin-left:-150px!important;/*FFIE7该值为本身宽的一半*/
margin-top:-60px!important;/*FFIE7该值为本身高的一半*/
margin-top:0px;
position:fixed!important;/*FFIE7*/
position:absolute;/*IE6*/
_top:expression(eval(document.compatMode&&
document.compatMode=='CSS1Compat')?
documentElement.scrollTop+(document.documentElement.clientHeight-this.offsetHeight)/2:/*IE6*/
document.body.scrollTop+(document.body.clientHeight-this.clientHeight)/2);/*IE5IE5.5*/
}
.bg,.popIframe{
background-color:#666;display:none;
width:100%;
height:100%;
left:0;
top:0;/*FFIE7*/
filter:alpha(opacity=50);/*IE*/
opacity:0.5;/*FF*/
z-index:1;
position:fixed!important;/*FFIE7*/
position:absolute;/*IE6*/
_top:expression(eval(document.compatMode&&
document.compatMode=='CSS1Compat')?
documentElement.scrollTop+(document.documentElement.clientHeight-this.offsetHeight)/2:/*IE6*/
document.body.scrollTop+(document.body.clientHeight-this.clientHeight)/2);
}
.popIframe{
filter:alpha(opacity=0);/*IE*/
opacity:0;/*FF*/
}
-->
</style>
<scriptlanguage="javascript"type="text/javascript">
functionshowDiv(){
document.getElementById('popDiv').style.display='block';
document.getElementById('popIframe').style.display='block';
document.getElementById('bg').style.display='block';
}
functioncloseDiv(){
document.getElementById('popDiv').style.display='none';
document.getElementById('bg').style.display='none';
document.getElementById('popIframe').style.display='none';
}
</script>
</head>
<body>
<divid="popDiv"class="mydiv"style="display:none;">烈火学院欢迎你！请记住我们的网址：http://www.veryhuo.com
<br><ahref="javascript:closeDiv()">关闭窗口</a></div>
<divid="bg"class="bg"style="display:none;"></div>
<ahref="javascript:showDiv()">点击这里弹出层</a>
<iframeid='popIframe'class='popIframe'frameborder='0'></iframe>
</body>
</html><br/><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<ahref='http://www.veryhuo.com/'target='_blank'>http://www.veryhuo.com/</a></center>
