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

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

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

HTML：

<div id="mask" class="mask"></div>
<a href="javascript:;" onClick="showMask()" >显示遮罩层</a><br>
<a href="javascript:;" onClick="hideMask()" >隐藏遮罩层</a>

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'); //使网页恢复可滚
})