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'); //使网页恢复可滚
})声明：本文由w3h5原创，转载请注明出处：《jQuery遮罩（Mask）及弹窗时禁止页面滚动实现》 https://cloud.tencent.com/developer/article/1537944
(adsbygoogle = window.adsbygoogle || []).push({});本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读