遮罩层出来后页面滚动问题

最新推荐文章于 2022-01-10 16:27:02 发布

weixin_34242658

最新推荐文章于 2022-01-10 16:27:02 发布

阅读量1.1k

点赞数

文章标签： python

原文链接：https://my.oschina.net/u/2365397/blog/3049229

版权

2019独角兽企业重金招聘Python工程师标准>>>

1、自定义遮罩层

.customMask{
    position: fixed;
    width: 100%;
    height: 100%;
    /* top: 0; */
    /* left: 0; */
    background: rgba(0, 0, 0, 0.6);
    z-index: 11;
    right: 0;
    display: flex;
    justify-content: flex-end;
    padding-bottom: 2.25rem;
}

2、遮罩层出来后页面滚动问题处理

2.1：css

/*遮罩层显示时body的样式*/
.notScroll {
    overflow: hidden;
}

2.2：js

/**
 * 打开弹框
 * @author 2019-05-06
 */
function openQRcodePop(good) {
    // 遮罩出来后让body不可滚动
    $('body,html').addClass('notScroll');
}
/**
 * 关闭弹框
 * @author 2019-05-06
 */
function closeQRcodePop() {
    // 遮罩去掉之后body 可滚动
    $('body,html').removeClass('notScroll');
}

转载于:https://my.oschina.net/u/2365397/blog/3049229