打开模态时禁用滚动

Question

我想在模态打开时禁用滚动。我已经看到有关这个问题的讨论涉及bootstrap，但我没有使用bootstrap，我的所有代码都是自定义的。有什么方法可以将此方法与下面的代码结合使用：

function mobileNav() {
  $('.menu-toggle').on('click', function(){
    var status = $(this).hasClass('is-open');
    if(status){
      $('.menu-toggle,.side-menu,').removeClass('is-open');
    }else {
      $('.menu-toggle,.side-menu').addClass('is-open');
    }
});

（Code as a screenshot）

Answer 1

打开模态时，将以下css添加到body：

overflow: hidden;

Answer 2

您可以在模态的css中使用overflow: hidden来阻止滚动。

JQuery有一个名为toggleClass的有用函数，它可以使您的代码更具可读性。