如何在瀏覽器窗口上添加一個(gè)遮罩層

背景
在web2.0中，頁(yè)面彈窗是一個(gè)很常見(jiàn)的交互方式，這樣既可以避免不必要的頁(yè)面跳轉(zhuǎn)，也可以改進(jìn)界面的布局和可交互性。
但是，瀏覽器原生的彈窗函數(shù)（alert, confirm, prompt）有著很大的局限性，主要是它們的展現(xiàn)UI一來(lái)很不美觀，二來(lái)也不夠靈活，因此，我們經(jīng)常需要自行定義彈窗函數(shù)。
當(dāng)我們要實(shí)現(xiàn)一個(gè)模式彈窗時(shí)（模式彈窗，即是說(shuō)出現(xiàn)彈窗時(shí)，頁(yè)面其它地方不可點(diǎn)擊），通常的做法是用一個(gè)div將整個(gè)頁(yè)面窗口遮擋住。
實(shí)現(xiàn)
下面，我們一步步地實(shí)現(xiàn)一種較為簡(jiǎn)潔有效的遮罩層：

Step 1:
首先我們要考慮定義一個(gè)遮擋瀏覽器窗口的div，考慮下面一段html+css代碼：
<div unselectable="on" style="background:#000;filter:alpha(opacity=10);opacity:.1;left:0px;top:0px;position:fixed;height:100%;width:100%;overflow:hidden;z-index:10000;"></div>
它可以實(shí)現(xiàn)遮擋瀏覽器窗口的功能，其中幾個(gè)需要注意的css屬性分別解釋如下：
1)background:#000: 將div的背景色設(shè)置為黑色; filter:alpha(opacity=10): 在IE下，將div的透明度設(shè)置為0.1; opacity:.1: 在非IE下，將div的透明度設(shè)置為0.1
以上三個(gè)屬性聯(lián)合起來(lái)，實(shí)現(xiàn)了頁(yè)面其余元素的“被擋住但可見(jiàn)”的效果。
2)left:0px;top:0px;position:fixed;height:100%;width:100%: 定義div的高度和寬度分別是瀏覽器高度和寬度的100%。這里有個(gè)小技巧，如果div的position是fixed或者absolute，那么當(dāng)div的高度設(shè)置為百分比(例如100%)時(shí)，div的高度將參照瀏覽器可視區(qū)域(viewport)的高度來(lái)計(jì)算。此外，設(shè)置position為fixed，可以使得瀏覽器即使在scroll或resize時(shí)也保證遮罩層一直擋在頁(yè)面的可視區(qū)域。
3)overflow:hidden 用來(lái)避免滾動(dòng)條的出現(xiàn)。

Step 2:
細(xì)心的讀者應(yīng)該可以發(fā)現(xiàn)上述的css代碼并不適用于IE 6，原因有兩個(gè)：一來(lái)，IE6不支持position:fixed；二來(lái)，更重要的是，在IE 6中，height:100%不起作用，div的高度不再參照瀏覽器可視區(qū)域的高度。
修正第一個(gè)缺陷很簡(jiǎn)單，只需用css hack，加上 _position:absolute 就行。
修正第二個(gè)缺陷，我們需要借助javascript，動(dòng)態(tài)地計(jì)算出遮罩層的高度和寬度，特別注意的是，為保證遮罩層在頁(yè)面滾動(dòng)時(shí)也遮住窗口，遮罩層的高寬應(yīng)該覆蓋住滾動(dòng)區(qū)域。
動(dòng)態(tài)計(jì)算的代碼如下，其中mask變量指向遮罩層：

此外，還需注意到，當(dāng)頁(yè)面大小發(fā)生變化時(shí)，要重新計(jì)算遮罩層的高寬，否則可能會(huì)新擴(kuò)大的區(qū)域沒(méi)有被遮罩。

Step 3:
通過(guò)Step 1和Step 2，我們基本上已完成了構(gòu)建遮罩層的工作。但工作并未完成，在IE6下，還需考慮一些特殊的情況：當(dāng)頁(yè)面上存在select元素的時(shí)候，遮罩層將無(wú)法遮住select元素，這是IE 6的一個(gè)著名bug，解決方案是在遮罩層中增加一個(gè)iframe。
Html+css代碼如下：

有幾個(gè)小技巧需要稍作解釋?zhuān)?/STRONG>
1)iframe的樣式使用 width:100%;height:100%; ，這是可行的，因?yàn)樗母付ㄎ辉氐母邔捯呀?jīng)確定了
2)在遮罩層內(nèi)部，除了一個(gè)iframe外，還增加了一個(gè)div，并且該div和iframe的position都是absolute，div的z-index大于iframe的z-index，這樣一來(lái)，就使得內(nèi)部div遮擋住了iframe。這具有現(xiàn)實(shí)意義：使得頁(yè)面的一些事件（例如onclick, onmouseup, onmousemove）依然會(huì)被響應(yīng)在本頁(yè)面上，而不是被iframe截獲。
代碼示例
綜合以上的分析，整體的實(shí)現(xiàn)代碼如下，大家可以參考一下：

復(fù)制代碼 代碼如下:

var windowMask = (function($) {

var isIE6 = $.browser.msie && $.browser.version == "6.0";
var mask = '<div unselectable="on" style="display:none;background:#000;filter:alpha(opacity=10);opacity:.1;left:0px;top:0px;position:fixed;height:100%;width:100%;overflow:hidden;z-index:10000;"></div>';

isIE6 && (mask = '<div unselectable="on" style="display:none;background:#000;filter:alpha(opacity=10);opacity:.1;left:0px;top:0px;position:fixed;_position:absolute;height:100%;width:100%;overflow:hidden;z-index:10000;"><div style="position:absolute;width:100%;height:100%;top:0;left:0;z-index:10;background-color:#000"></div><iframe border="0" frameborder="0" style="width:100%;height:100%;position:absolute;top:0;left:0;z-index:1"></iframe></div>');

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.body,
height = b.scrollHeight > b.clientHeight ? b.scrollHeight : b.clientHeight,
width = b.scrollWidth > b.clientWidth ? b.scrollWidth : b.clientWidth;

mask.css({height: height, width: width});
}

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

return {
show: show,
hide: hide
};
})();

使用很簡(jiǎn)單，當(dāng)需要展現(xiàn)遮罩層時(shí)，調(diào)用 windowMask.show()，要移除遮罩層時(shí)，調(diào)用 windowMask.hide()。

您可能感興趣的文章:

• JS遮罩層效果 兼容ie firefox jQuery遮罩層
• javascript ImgBox透明遮罩層背景圖片展示
• javascript div 遮罩層封鎖整個(gè)頁(yè)面