jquery遮罩层并禁止页面滚动

<!DOCTYPE HTML>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta charset="UTF-8" />
    <title>jquery遮罩层不滚动</title>
    <style>
        #mask {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 999;
            background: #00000088;
            opacity: 0.5;
            display: none;
        }

        .popup {
            position: absolute;
            width: 96%;
            height: 200px;
            background: #fff;
            z-index: 1000;
            display: none;
            bottom: 0px;
        }

        .btn_close {
            position: absolute;
            top: 5px;
            right: 5px;
        }

        .ovfHiden {
            overflow: hidden;
            height: 100%;
            
        }
    </style>
</head>

<body>
    <button class="btn_show">遮罩层</button>
    <div class="popup">
      <button class="btn_close">x</button>
  </div>
     <div>
         <h1>遮罩出现，页面禁止滚动</h1>
         <h1>遮罩出现，页面禁止滚动</h1>
         <h1>遮罩出现，页面禁止滚动</h1>
         <h1>遮罩出现，页面禁止滚动</h1>
         <h1>遮罩出现，页面禁止滚动</h1>
         <h1>遮罩出现，页面禁止滚动</h1>
         <h1>遮罩出现，页面禁止滚动</h1>
         <h1>遮罩出现，页面禁止滚动</h1>
         <h1>遮罩出现，页面禁止滚动</h1>
         <h1>遮罩出现，页面禁止滚动</h1>
         <h1>遮罩出现，页面禁止滚动</h1>
         <h1>遮罩出现，页面禁止滚动</h1>
         <h1>遮罩出现，页面禁止滚动</h1>
         <h1>遮罩出现，页面禁止滚动</h1>
     </div>
    <div id="mask" class="btn_close"></div>
    <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
    <script>
  $(function () {
    $('.btn_show').click(function () {
      $('html,body').addClass('ovfHiden');
      $('#mask').css({
        display: 'block',
      })
      var $Popup = $('.popup');
      $Popup.css({
        display: 'block',
      })
    })
    $('.btn_close').click(function () {
      $('#mask,.popup').css('display', 'none');
      $('html,body').removeClass('ovfHiden');
    })
  })
    </script>
</body>
</html>
jquery遮罩层并禁止页面滚动

猜你喜欢
