頁面全屏遮罩的實現 方式
阿新 • • 發佈：2019-02-02
之前做了一個頁面，在點選了某個按鈕之後，要求頁面出現一個全屏遮罩，一開始使用了position:absolute來實現的。當時因為畫面大小是固定的，不可以resize的，所以，沒有發現問題。
最近用了同樣的做法做了一個遮罩，但是畫面是可以進行resize的，所以就發現了一個問題，當畫面被reisze到瀏覽器出現了滾動條的時候，就發現，用absolute 的做法是有問題的。後來改成fixed定位就沒有問題了。
以下為測試程式碼 ，有興趣的童鞋可以試試看。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Mask</title> <style> body { height: 1000px; } .mask1 { position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; display: none; background: rgba(0, 0, 0, 0.4); } .mask2 { position: fixed; left: 0px; top: 0px; right: 0px; bottom: 0px; display: none; background: rgba(0, 0, 0, 0.4); } </style> <script> document.onclick = function(e) { var id = e.srcElement.id; if(id != "mask1" && id != "mask2") { document.querySelector(".mask1").style.display = "none"; document.querySelector(".mask2").style.display = "none"; } }; window.onload = function(){ document.querySelector("#mask1").onclick = function(e) { document.querySelector(".mask1").style.display = "block"; }; document.querySelector("#mask2").onclick = function(e) { document.querySelector(".mask2").style.display = "block"; }; }; </script> </head> <body> <div class="divcss5"> <button id="mask1" type="button">mask1</button> <button id="mask2" type="button">mask2</button> </div> <div class="mask1"></div> <div class="mask2"></div> </body> </html>