html DIV透明黑色浮層 提示載入中
阿新 • • 發佈：2019-02-12
<!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>
效果：
