JQuery弹出层，点击按钮后弹出遮罩层，有关闭按钮 禁止页面上下滑动

以下是一个简单的实现方式：

HTML代码：

<button id="open-modal">打开弹出层</button>

<div id="modal">
  <div class="modal-content">
    <h3>弹出层标题</h3>
    <p>弹出层内容</p>
    <button id="close-modal">关闭</button>
  </div>
</div>

<div id="overlay"></div>

CSS代码：

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

#modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  z-index: 10000;
  display: none;
}

.modal-content {
  padding: 20px;
}

#close-modal {
  position: absolute;
  top: 10px;
  right: 10px;
}

JQuery代码：

$(document).ready(function() {
  $('#open-modal').click(function() {
    $('#overlay').fadeIn();
    $('#modal').fadeIn();
    $('body').css('overflow', 'hidden');
  });
  
  $('#close-modal').click(function() {
    $('#overlay').fadeOut();
    $('#modal').fadeOut();
    $('body').css('overflow', 'auto');
  });
});

当点击按钮时，弹出层和遮罩层都会显示出来，并且禁止页面上下滑动。当关闭按钮被点击时，弹出层和遮罩层都会消失，并且恢复页面上下滑动。