html遮罩层禁止滚动条滚动,jQuery遮罩（Mask）及弹窗时禁止页面滚动实现

jQuery遮罩很容易实现，遮罩弹出后最好是要禁止页面滚动。

下面就写一个简单的遮罩，和禁止页面滚动的实例。

HTML：

显示遮罩层

隐藏遮罩层

CSS：.mask {

position: absolute;

top: 0px;

left: 0px;

background-color: #777;

z-index: 9;

filter: alpha(opacity=60); //IE透明度

opacity:0.5; //Chrome

-moz-opacity:0.5; //fireFox

}

jQuery：//显示遮罩层

function showMask(){

$("#mask").css("height",$(document).height());

$("#mask").css("width",$(document).width());

$("#mask").show();

}

//隐藏遮罩层

function hideMask(){

$("#mask").hide();

}

禁止滚动：#禁止浏览器滚动条滚动：

$('body').css({

"overflow":"hidden"

});

#还原滚动：

$('body').css({

"overflow":"auto"

});

保险起见可以把 html 和 body 的高度都设置 100% ，如下，用添加 class 的方法实现：

CSS：.ovfHiden{

overflow: hidden;

height: 100%;

}

jQuery：$(".btn").click(function(){

$('html,body').addClass('ovfHiden'); //使网页不可滚动

})

$(".btnc").click(function(){

$('html,body').removeClass('ovfHiden'); //使网页恢复可滚

})