js制作使整页变灰的页面

经常看到一些网页能有打开一个窗口似的“层”而使整个页面挡住而不可使用的样式。

这种样式的制作思想是：

                            在打开一个层（类对话框的层）的时候，用另一个半透明的灰色的层挡住后面的页面使其变成灰色，给人的感觉就是不可用了（其实是你点不到了，呵呵……）

制作代码如下：

                      <style>
*{
margin:0;
padding:0;
}

#topCoverDiv{
filter:alpha(opacity=40);-moz-opacity:.4;opacity:0.4;
position:absolute;
width:100%;
height:100%;
background-color:#c0c0c0;
z-index:100;
text-align:center;
}

#dia{
color:#FFFFFF;
background:#000000;
z-index:200;
position:absolute;
filter:alpha(opacity=100);
-moz-opacity:1;
opacity:1;
top:200px;
left:200px;
width:200px;
height:60px;
}
#dia a{
 color:#ffffff;
}
</style>
<div id=topCoverDiv style="display:none;"></div>
<div id=dia style="display:none">
 <a href=javascript:void(0) onclick="test()">关闭</a>
</div>
<script type="text/javascript">
function test(){
var maskBg=document.getElementById('topCoverDiv')
var dia=document.getElementById('dia')
  maskBg.style.display =(maskBg.style.display=='none') ?'block':'none';
  dia.style.display =(dia.style.display=='none') ?'block':'none';
}
</script>
<a onclick="test()">test</a>

<font color='red'>被你挡住了----------------呜呜呜！</font>

转自：http://blog.163.com/xiaomaonn@126/blog/static/93147983200962811452151/