Javascript 模态 - 禁用正文滚动但使用 css 启用模态

Question

我为模态窗口创建了这段 html 代码

$("button").click(function(e){
  e.preventDefault();
  $(".wrap-fadeOut").fadeIn(800);
  $('html').css('overflow', 'hidden');
  $('body').bind('touchmove', function(e) {
      e.preventDefault()
  });
});

img {
  display: block;
}
.wrap-fadeOut {
  position: fixed;
  height: 100%;
  width: 100%;
  background: black;
  z-index: 999;
  top: 0;
  left: 0;
  display: none;
}
.modal {
  margin: 2em auto;
  background: white;
  width: 50%;
  border-radius: 5px;
  padding: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button>Show modal</button>
<div class="wrap-fadeOut">
<div class="modal">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<img src="https://s-media-cache-ak0.pinimg.com/736x/90/c1/33/90c133d504c043c904215de79fc3c892.jpg" alt="">
<img src="https://s-media-cache-ak0.pinimg.com/736x/90/c1/33/90c133d504c043c904215de79fc3c892.jpg" alt="">
<a href="#" class="button closeModal">Button</a>
</div>
</div>

我应该怎么做才能禁用 body 的滚动，但保持 .modal 的滚动？我更喜欢 CSS 解决方案，但也欢迎 jQuery/javascript。

Answer 1

方法一

在调用模态时，将 overflow-y: hidden 添加到 body。

$("button").click(function(e){
  e.preventDefault();
  $(".wrap-fadeOut").fadeIn(800);
  $('body').css('overflow-y', 'hidden');
  $('body').bind('touchmove', function(e) {
      e.preventDefault()
  });
});

然后您需要在关闭模态时从 body 中删除 overflow-y 属性。

$(".closeModal").click(function() {
    $('body').css('overflow-y', 'auto');
    $(".wrap-fadeOut").fadeOut(800);
});

方法二

或者，您可以创建一个 css 类，例如

.hideScroll {
  overflow-y: hidden;
}

并在模态打开时将 css 类添加到主体，并在模态关闭时将其删除。

$("button").click(function(e){
  e.preventDefault();
  $(".wrap-fadeOut").fadeIn(800);
  $('body').addClass("hideScroll");
  $('body').bind('touchmove', function(e) {
      e.preventDefault()
  });
});

$(".closeModal").click(function() {
  $('body').removeClass("hideScroll");
  $(".wrap-fadeOut").fadeOut(800);
});

注意:要在模式上启用滚动，请给它一个固定的高度并提供overflow-y: auto

.modal {
  height: 300px; /* customise as per the height required */
  overflow-y: auto
}