javascript - 弹出模式关闭后如何从正文中删除css？

Question

我是网络开发的初学者。

我有一个模态显示并关闭

对于我的关闭弹出模式功能，我需要添加删除此样式：

body::-webkit-scrollbar { display: none;  }
html, body { -ms-overflow-style: none; overflow: auto; }

我怎样才能做到？

$(document).ready(function() {
  // show 
  setTimeout(
    function() {
      // $('#modal__trigger2').trigger('click');
      $('#demoModal').modal('show');
    }, 2000);

  // and close
  $('.close-modal-box').click(function(event) {
    event.preventDefault();
    $('#demoModal').modal('hide');
    document.body.scrollTop = document.documentElement.scrollTop = 0;
    $('body').scrollTop(0);
    event.preventDefault();
  });
});

body::-webkit-scrollbar {
  display: none;
}

html,
body {
  -ms-overflow-style: none;
  overflow: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

标签： javascriptjquerycsstwitter-bootstrap

Answer 1

您可以在这样的类中使用您的样式：

.modal-open {
    -ms-overflow-style: none;
    overflow: auto;
}
.modal-open::-webkit-scrollbar { display: none;  }

然后您的 js 代码将如下所示：

$(document).ready(function() {
  // show 
  setTimeout(
    function() {
      document.body.classList.add('modal-open');
      $('#demoModal').modal('show');
    }, 2000);

  // and close
  $('.close-modal-box').click(function(event) {
    event.preventDefault();
    $('#demoModal').modal('hide');
    document.body.scrollTop = document.documentElement.scrollTop = 0;
    $('body').scrollTop(0);
    document.body.classList.remove('modal-open');
  });
});