前端開發中，很多時候一個彈出層的顯示都會伴隨着一個遮罩層的顯示。
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 2 "http://www.w3.org/TR/html4/loose.dtd"> 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <title>全屏遮罩</title> 8 </head> 9 10 <body> 11 <style> 12 .float-bg { 13 width: 100%; 14 height: 100%; 15 background-color: #000; 16 opacity: .6; 17 filter: alpha(opacity=60); 18 position: absolute; 19 left: 0; 20 top: 0; 21 z-index: 1100; 22 } 23 </style> 24 <div class="float-bg" id="float-bg"> </div> 25 </body> 26 </html>
以上代碼是一個遮罩層的簡易演示代碼。
在頁面沒有滾動條的情況下都能滿足要求。但是當頁面有滾動條時，你就會發現，以上的處理方式並不能滿足全屏遮罩。
下面就通過結合javascript的方式，實現頁面包含滾動條時的全屏遮罩。
這里將會用到上一篇文章中的兩個方法：scrollWidth，scrollHeight。相關處理方式如下：
1 var floatBg = document.getElementById("float-bg"); 2 floatBg.style.width= document.body.scrollWidth + "px";
floatBg.style.height = document.body.scrollHeight + "px";
這樣處理，不管頁面是否包含滾動條，都能實現全屏遮罩了。