静心阁

在网上看了一些这方面的效果，有的遮罩只能遮住可见区域，如果有滚动条（特别是下面的滚动条）时滚动后的部分依然没遮住；有的是初次生成遮罩即固定遮罩层的大小，如果浏览器窗口大小改变，遮罩层的大小不随着改变，导致出现滚动条。于是自己多方参照写了个，效果还不错，各浏览器也兼容。

使用了jquery，其实不需要也可以，转换一下就行。

http://www.angelscat.cn/lab/overlay.html

<script type="text/javascript">
function isStrictMode(){
return document.compatMode != "BackCompat";
}

function pageWidth(){
return isStrictMode() ? Math.max(document.documentElement.scrollWidth,  document.documentElement.clientWidth) :  Math.max(document.body.scrollWidth, document.body.clientWidth);
}

function pageHeight(){
return isStrictMode() ? Math.max(document.documentElement.scrollHeight,  document.documentElement.clientHeight) :  Math.max(document.body.scrollHeight, document.body.clientHeight);
}

(function($){
var overlayElement = null;
function createOverlay(opacity, zIndex){
opacity = opacity || 0.3;
zIndex = zIndex || 2000;

var el = $('<div>');
overlayElement = el;

$(el).css({
'position': 'absolute',
'top': 0,
'left': 0,
'opacity': opacity,
'background': '#000',
'z-index': zIndex
}).html('<iframe width="100%" height="100%" frameBorder="0"  style="position:absolute;top:0;left:0;z-index:1;"></iframe>' +
'<div  style="position:absolute;top:0;left:0;width:100%;height:100%;background-color:#000000;z-index:2;"></div>')

function resize(){
setTimeout(function(){//IE的resize很奇怪
$(el).hide()
.height(pageHeight())
.width(pageWidth())
.show();
}, 0);
}

resize();

$(window).bind('resize', function(){
if (overlayElement && $(overlayElement).css('display') !=  'none') {
try {
resize();
}
catch (e) {

}
}
});

$('body').prepend(overlayElement);
}
$.disable = function(lock){
if (!overlayElement) {
createOverlay();
}
if (lock) {
$(document.body).css('overflow',  'hidden');//是否锁屏，锁屏表示overflow:hidden,所有屏幕外的区域不可见;
}
}
$.enable = function(){
if (!overlayElement)
return;
overlayElement.remove();
$(document.body).css('overflow', '');
overlayElement = null;
}

})(jQuery);
</script>