背景为透明黑幕的遮罩弹窗
Posted 你七啊？
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了背景为透明黑幕的遮罩弹窗相关的知识，希望对你有一定的参考价值。
对整个页面进行透明黑色遮罩；单独显示一个框图，类似弹窗。用户可以看到整个页面，但只能对显示的框图内容进行操作；并且背景下的整个页面禁止用户操作。
代码：
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>
以上是关于背景为透明黑幕的遮罩弹窗的主要内容，如果未能解决你的问题，请参考以下文章