移动端遮罩层,放在页面最上面,并且不能滚动

Posted lengyue0030

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端遮罩层,放在页面最上面,并且不能滚动相关的知识,希望对你有一定的参考价值。

点击弹出遮罩层,需要规定到页面最上面,并且不让其滚动;

点击添加一个类:

.maskstyle{
    width:100%;
    height:100%;
    position:fixed;
    overflow:hidden;
}
.mask{
    diaplay:none;
    poaition:acsolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    background:rgba(0,0,0,.3);
    z-index:2;
}

js控制显示隐藏

显示:
    $(".mask").show();
    $("html,body").addClass("maskstyle");
    

隐藏:
    $(".mask").hide();
    $("html,body").removeClass("maskstyle");

 

以上是关于移动端遮罩层,放在页面最上面,并且不能滚动的主要内容,如果未能解决你的问题,请参考以下文章

移动端遮罩层滚动时,禁止底部滑动

移动端遮罩层滚动时,禁止底部滑动

移动端遮罩层,内容大小改变动态大小

小程序遮罩层禁止页面滚动(遮罩层内部可以滚动)

微信小程序 原生开发 实现弹窗遮罩层 并且在遮罩层内使用scroll-view实现滚动内容(包括图片)

微信小程序 原生开发 实现弹窗遮罩层 并且在遮罩层内使用scroll-view实现滚动内容(包括图片)