zoukankan      html  css  js  c++  java
  • 移动端body跟着模态框一起滑动问题

     遇到了一个问题,是点击链接出现弹框,弹框里面的内容是可以滑动的,结果我滑动的时候发现下面的body也跟着一起滑动,先看一下代码。

    弹框的 HTML:

    <div class="mask">
        <div class="reserve">
            <span class="close">X</span>
            <div class="title">title</div>
            <div class="content">
          //很多内容
            </div>
        </div>
    </div>

    弹框的 CSS :

    .mask {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: none;
        z-index: 990;
        background: rgba(0, 0, 0, .7);
    }
    .reserve {
        position: relative;
        width: 90%;
        height: 80%;
        z-index: 999;
        overflow: auto;
        border-radius: 10px;
        margin: 100px auto;
        background-color: #fff;
    }

    这样写确实没问题,但是问题也跟着来了,滑动内容的时候body也会跟着滑动,下面是解决办法。

    给 html 和 body 都加上

    .ban_body {
        height: 100%;
        overflow: hidden;
    }

    我是这样解决的 :当点击按钮的时候为 html 和 body 加上  .ban_body ,这样body就不跟着一起滑动了。

        $(document).on("click",".btn", function () {
            $("html,body").addClass("ban_body")
            $(".mask").show(100);
        })

    关闭的时候别忘删掉哦。

  • 相关阅读:
    [手游新项目历程]-36- error: stray ‘357’ in program
    广告学(一)
    VMware的Unity模式
    poj3709
    poj1849
    bzoj2007
    bzoj3209
    bzoj2466,poj1222
    bzoj1016
    bzoj2186
  • 原文地址:https://www.cnblogs.com/bfc0517/p/7810703.html
Copyright © 2011-2022 走看看