在瀏覽器視窗上新增遮罩層的方法_基礎知識

如何在瀏覽器視窗上新增一個遮罩層

背景
在web2.0中，頁面彈窗是一個很常見的互動方式，這樣既可以避免不必要的頁面跳轉，也可以改進介面的佈局和可互動性。
但是，瀏覽器原生的彈跳窗函數（alert, confirm, prompt）有著很大的局限性，主要是它們的展現UI一來很不美觀，二來也不夠靈活，因此，我們經常需要自行定義彈窗函數。
當我們要實現一個模式彈窗時（模式彈窗，即是說出現彈窗時，頁面其它地方不可點擊），通常的做法是用一個div將整個頁面窗口遮擋住。
實作
下面，我們一步步實現一個較為簡潔有效的遮罩層：

Step 1:
首先我們要考慮定義一個遮蔽瀏覽器視窗的div，考慮下面一段html css程式碼：

它可以實現遮擋瀏覽器視窗的功能，其中幾個需要注意的css屬性分別解釋如下：
1)background:#000: 將div的背景色設定為黑色; filter:alpha(opacity=10): 在IE下，將div的透明度設置為0.1; opacity:.1: 在非IE下，將div的透明度設定為0.1
以上三個屬性聯合起來，實現了頁面其餘元素的「被阻擋但可見」的效果。
2)left:0px;top:0px;position:fixed;height:100%;width:100%: 定義div的高度和寬度分別是瀏覽器高度和寬度的100%。這裡有個小技巧，如果div的position是fixed或absolute，那麼當div的高度設定為百分比(例如100%)時，div的高度將參考瀏覽器可視區域(viewport)的高度來計算。此外，設定position為fixed，可以讓瀏覽器即使在scroll或resize時也保證遮罩層一直擋在頁面的視覺區域。
3)overflow:hidden 用來避免捲軸的出現。

Step 2:
細心的讀者應該可以發現上述的css程式碼並不適用於IE 6，原因有兩個：一來，IE6不支援position:fixed；二來，更重要的是，在IE 6中，height:100%不起作用，div的高度不再參考瀏覽器視覺區域的高度。
修正第一個缺陷很簡單，只要用css hack，加上 _position:absolute 就行。
修正第二個缺陷，我們需要藉助javascript，動態地計算出遮罩層的高度和寬度，特別注意的是，為確保遮罩層在頁面滾動時也遮住窗口，遮罩層的高寬應該覆蓋住滾動區域。
動態計算的程式碼如下，其中mask變數指向遮罩層：

複製程式碼 程式碼如下:

function calculateSize() {
var b = document.documentElement.clientHeight ? document.documentElement : document.body,
height = b.scrollHeight > b.cliclientHeight b. ,
width = b.scrollWidth > b.clientWidth ? b.scrollWidth : b.clientWidth;
mask.css({height: height, width:}
}

此外，還需注意到，當頁面大小發生變化時，要重新計算遮罩層的高寬，否則可能會新擴大的區域沒有被遮罩。

複製程式碼

程式碼如下:

function resize() {


function resize() {

culateSize();
$(window).on(“resize”, calculateSize); }


Step 3:

透過Step 1和Step 2，我們基本上已完成了建造遮罩層的工作。但工作並未完成，在IE6下，還需考慮一些特殊的情況：當頁面上存在select元素的時候，遮罩層將無法遮住select元素，這是IE 6的一個著名bug，解決方案是在遮罩層中增加一個iframe。 Html css程式碼如下：

複製程式碼

程式碼如下:

程式碼如下:

有幾個小技巧需要稍作解釋：
1)iframe的樣式使用width:100%;height:100%; ，這是可行的，因為它的父定位元素的高寬已經確定了
2)在遮罩層內部，除了一個iframe外，還增加了一個div，並且該div和iframe的position都是absolute，div的z-index大於iframe的z-index ，這樣一來，就使得內部div遮擋住了iframe。這具有現實意義：使得頁面的一些事件（例如onclick, onmouseup, onmousemove）依然會被回應在本頁面上，而不是被iframe截獲。
程式碼範例
綜合以上的分析，整體的實作程式碼如下，大家可以參考一下：

複製程式碼

複製程式碼

程式碼如下:


var windowMask = (function($) {

var isIE6 = $.browser.msie && $.browser.version == "6.0";
var mask = '

';

isIE6 && (mask = '

');

mask = $(mask);
$("body").append(mask);

function show() {
isIE6 && resize();
mask.show();
}

function hide() {
isIE6 && $(window).off("resize", calculateSize) ;
mask.hide();
}

function calculateSize() {
var b = document.documentElement.clientHeight ? document.documentElement : document.documentElement.clientHeight ? document.documentElement : document.body, b.clientHeight ? b.scrollHeight : b.clientHeight,
width = b.scrollWidth > b.clientWidth ? b.scrollWidth : b.clientWidth;

{height height, width: width});
}

function resize() {
calculateSize();
$(window).on("resize", calculateSize);
$(window).on("resize", calculateSize);
}

return {
show: show,

hide: hide
}; })(); 使用很簡單，當需要展現遮罩層時，呼叫windowMask.show()，要移除遮罩層時，呼叫windowMask.hide()。