div+css遮罩层

 

    曾被问到这个问题,不知所措,后来在网上找到了.大神文章:http://www.cnblogs.com/aspx-net/archive/2011/03/11/1981071.html

    我想实现的效果没有上面那么多,仅仅出现一个灰蒙蒙的div层就可以了,所以做了一些改动.

  

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2  <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <title>DIV CSS遮罩层</title>
 5 <script language="javascript" type="text/javascript">
 6     function showdiv() {
 7         document.getElementById("bg").style.display = "block";
 8     }
 9     function hidediv() {
10         document.getElementById("bg").style.display = 'none';
11     }
12 </script>
13 <style type="text/css">
14 #bg{ display: none; 
15      position: absolute; 
16      top: 10%; 
17      left: 10%; 
18      width: 80%; 
19      height: 80%;
20      background-color: grey; 
21      z-index:1; 
22      -moz-opacity: 0.7;            /*不知道有啥用*/
23      opacity:0.70;                /*不知道有啥用*/
24      filter: alpha(opacity=10);  /*这个是真正起作用的*/
25      }
26 </style>
27 </head>
28 <body>
29 <input id="btnshow" type="button" value="Show" onclick="showdiv();"/><br/><br/>
30 <input id="btnclose" type="button" value="Close" onclick="hidediv();"/>
31 <div id="bg"></div>
32 </body>
33 </html>
View Code
posted on 2014-04-23 14:49  水语者9  阅读(232)  评论(0)  编辑  收藏  举报