<!doctype html> <html> <head> <title>遮罩层</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <style> #cover{ display:none; position:fixed; z-index:1; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.44); } #coverShow{ display:none; position:fixed; z-index:2; top:50%; left:50%; width:300px; height:100px; margin-left:-150px; margin-top:-150px; } </style> <script> function clickfunc() { alert("clicked, 遮住之前’测试‘按钮是起作用的"); } function coverit() { var cover = document.getElementById("cover"); var covershow = document.getElementById("coverShow"); cover.style.display = 'block'; covershow.style.display = 'block'; //alert("已经遮住，’测试‘按钮已经不起作用了"); } </script> </head> <body> <div id="cover"></div> <div id="coverShow"> <div style="text-align: center;">加载中...</div> </div> <div> 这里面是内容 <span>所有的内容都被cover遮住</span> <div> <font style="color:red"> 两个遮罩层 <br/> 第一个遮罩层cover是将整个body盖住，width=100%,height=100%. 第二个遮罩层coverShow居中显示，可以在里面加载img元素。 </font> </div> <input type="button" value="测试" onclick="clickfunc()"/> </div> <input type="button" value="遮住" onclick="coverit()"/> </body> </html> 效果：
文章来源: html DIV透明黑色浮层 提示加载中