今天小编跟大家讲解下有关弹出一个遮罩层有正在加载效果的文字 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关弹出一个遮罩层有正在加载效果的文字 的相关资料，希望小伙伴们看了有所帮助。
实现： 复制代码代码如下: <!doctype html> <html> <head> <title>遮罩层</title> <meta charset="utf-8"/> <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%; border:1px solid #127386; width:300px; height:100px; margin-left:-150px; margin-top:-150px; background:#127386; } </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"> <table align="center"border="0"width="100%"cellspacing="0"cellpadding="0"style="border-collapse: collapse; height: 100px; min-height: 100px;"bgcolor="#127386"> <tr> <td height="30"style="font-size: 12px;">正在加载 请稍后......</td> </tr> <tr> <td align="center"bgcolor="#ffffff"> 这里加载一个img src为动态的gif </td> </tr> </table> </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>来源：爱蒂网
