使用 jQuery 打开模态时如何防止 Body 滚动？

当我们在页面中使用模态框时，通常会有一个背景遮罩来防止用户与后台进行交互，并且有些情况下，当模态框弹出时，我们希望用户不能滚动页面。在这篇文章中，我将向您展示如何使用 jQuery 来实现这一点。

HTML

首先，在您的 HTML 文件中，您需要为您的页面添加一个背景遮罩和一个模态框。这里是一个例子：

<div id="modalBackground"></div>
<div id="modalBox">
  <h1>Modal Box</h1>
  <p>Here's some content in the modal box!</p>
  <button id="closeButton">Close</button>
</div>

在这个例子中，我们有一个 id 为 modalBackground 的 div 元素来作为背景遮罩，和一个 id 为 modalBox 的 div 元素来作为模态框。我们还添加了一个关闭按钮。

CSS

在为模态框添加功能之前，我们需要先通过 CSS 来为模态框和背景遮罩设置样式。这里是一个基本的 CSS 样式设置：

#modalBackground {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: none;
}

#modalBox {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10000;
  background: #fff;
  padding: 30px;
  text-align: center;
  display: none;
}

在这个例子中，我们为 modalBackground 和 modalBox 设置了样式。我们将 modalBackground 设置为一个占据整个页面的黑色半透明背景。我们将 modalBox 放置在屏幕的中心，将其背景设置为白色，并添加了一些基本的样式。

JavaScript

现在我们来设置当用户在页面中滚动时防止滚动的 JavaScript 代码。

$(document).ready(function() {
  var modalBackground = $('#modalBackground');
  var modalBox = $('#modalBox');

  $('#openButton').click(function() {
    modalBackground.css('display', 'block');
    modalBox.css('display', 'block');
    $('body').css('overflow', 'hidden');
  });

  $('#closeButton').click(function() {
    modalBackground.css('display', 'none');
    modalBox.css('display', 'none');
    $('body').css('overflow', 'auto');
  });
});

现在，当用户点击打开按钮时，模态框将出现在屏幕中央，body 元素将被设置为 overflow: hidden，这样就可以防止用户滚动页面。当用户点击关闭按钮时，模态框将被隐藏，body 元素将被设置为 overflow: auto，这样用户就可以再次滚动页面。

总结

在本文中，我们学习了如何使用 jQuery 和一些基本的 HTML 和 CSS 来创建一个简单的模态框，以及如何在打开模态框时防止用户滚动页面。