背景为透明黑幕的遮罩弹窗

对整个页面进行透明黑色遮罩；单独显示一个框图，类似弹窗。用户可以看到整个页面，但只能对显示的框图内容进行操作；并且背景下的整个页面禁止用户操作。

 

代码：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>测试</title>
 6 
 7    
 8 
 9  <style type="text/css">
10     .blackoveride{
11         display:none;
12         position:absolute;
13         top:0%;left:0%;width:100%;height:100%;background-color:black;z-index:1001;
14         filter:alpha(opacity=60);       /* IE 兼容性IE11*/
15         -moz-opacity:0.5;              /* 老版Mozilla */
16           opacity: 0.5;           /* 支持opacity的浏览器*/
17     }
18     .wihte_con{
19         display:none;
20         position:absolute;
21         top:50%;
22         left:38%;
23         background-color:white;
24         z-index:1002;
25         overflow:hidden;
26         width:600px ;
27         height: 100px;
28     
29         /*text-align: center;*/
30 }
31      
32 
33  </style>
34 </head>
35 <body>
36 
37     <div id="light" class="wihte_con">
38          <div>
39              <a href="javascript:void(0)" onclick="closeAlert()">关闭</a>
40          </div>              
41         <div id="Alert">    
42                 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
43                 电话卡双精度拉丝机烂大街菲勒灯鳉复合弓快递费
44                 
45         </div>
46         
47     </div>
48 
49     <div id="fade" class="blackoveride"></div>
50 
51     <button onclick="alertshow()">显示</button>
52 <script type="text/javascript">
53 
54     function closeAlert(){
55         document.getElementById('light').style.display='none';
56         document.getElementById('fade').style.display='none';
57     }
58 
59     function alertshow(){
60         document.getElementById('light').style.display='block'; 
61         document.getElementById('fade').style.display='block' ;
62     }
63 
64         
65 </script>
66 </body>
67 </html>

 

posted @ 2017-09-11 21:02  你七啊？  阅读(670)  评论(0)  编辑  收藏  举报