移动端的弹窗活动窗口，在首页关闭之后只显示一次，取消底部body

首先是html部分代码：

<div class="activity-mask">
        <div class="activity-img">
            <a href="###">  <img src="{$APP_ROOT}/wap/Tpl/main/images/shitanchuang.png" alt="" style="line-height: 1.75rem"/> </a>
        </div>
        <div class="closeImg closeGUnggao"><img src="{$APP_ROOT}/wap/Tpl/main/images/closeImg.png"> </div>
    </div>

css部分样式代码：

/*十元直购专区弹窗样式设计*/
.activity-mask{
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    top: 0;
    left: 0;
    z-index: 1001;
    display: none;
}
.activity-img{
    width: 12rem;
    height: 12rem;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
.activity-img img{
    width: 12rem;
    height: 12rem;
}
.activity-mask .closeImg{
    top: 8rem!important;
    left: 12rem!important;
}

.forbiddenClass{
    position:fixed;
    top:0;
    height: 100%;
    overflow: hidden;
}

当页面加载完成之后执行以下js部分代码：

if(localStorage.getItem("exits") == null || localStorage.getItem("exits") == undefined){
        $(".activity-mask").css({
            'display' : 'block',
        });

        // 哎，你还别说，这个方法真的有效，底层的内容不会滚动了,问题解决了，然后就是还有一个细节要考虑，就是将页面定位后，内容会回到头部最顶端，如有需要，这里我们需要记录一下，当取消蒙层时同步top值。
        $(document.body).addClass("forbiddenClass");
    }
    $(".activity-mask .closeImg").bind("click", function(e) {
        e.preventDefault();
        localStorage.setItem("exits",true);
        $(".activity-mask").css({
            'display' : 'none',
        });
        //  阻止弹窗的默认滑动事件 在关闭弹出层时，去掉这段样式就可以了。
        $(document.body).removeClass("forbiddenClass");
    });

最终实现效果：底部的body部分不会再滚动，需要在css里面写好样式 .forbiddenClass