对整个页面进行透明黑色遮罩；单独显示一个框图，类似弹窗。用户可以看到整个页面，但只能对显示的框图内容进行操作；并且背景下的整个页面禁止用户操作。
代码：
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>
时间： 2024-10-14 05:09:51