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