DivCSS+JavaScript实现 始终居中的半透明弹出层

DivCSS+JavaScript实现弹出一个始终居中的半透明层，它可以自动适应浏览器窗口大小，拖动IE滚动条它仍然居中，而且还可以改变它的透明度，和大站的效果是一样的。
　　 先看HTML代码：

Example Source Code [www.52css.com]

<divid="popDiv"class="mydiv"style="display:none;">52CSS.com欢迎你！<br/>Q群号:48822948<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>

　　 再编写CSS样式：

Example Source Code [www.52css.com]

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*/
}

　　 通过JavaScript实现层的隐藏与显示切换：

Example Source Code [www.52css.com]

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';
}