美文网首页
jQuery 遮盖层弹出后禁止页面滚动

jQuery 遮盖层弹出后禁止页面滚动

作者: yiqian091 | 来源:发表于2018-12-14 16:47 被阅读0次

    <!DOCTYPE html>

    <html lang="en">

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <meta http-equiv="X-UA-Compatible" content="ie=edge">

        <title>Document</title>

        <style>

            body{

                height: 10000px;

            }

            .shadow{

              height: 100%;

              overflow: hidden;

            }

        </style>

    </head>

    <body id="body">

        <div class="btn1">点击</div>

        <div class="btn2">停止</div>

        <script src="jquery-1.11.3.min.js"></script>

        <script>

          $('.btn1').click(function(){

              $('body').addClass('shadow');

          })

          $('.btn2').click(function(){

            $('body').removeClass('shadow');

          })

        </script>

    </body>

    </html>

    实现原理:

    给body设置属性overflow:hidden;height:100%;

    相关文章

      网友评论

          本文标题:jQuery 遮盖层弹出后禁止页面滚动

          本文链接:https://www.haomeiwen.com/subject/ggbghqtx.html