打开模态框时禁止背景滚动且模态内容可滚动的复用实现方案

核心问题定位 #

原有代码存在4个直接导致异常的点：

• 模态框使用position: absolute定位，高度依赖父容器，无法稳定占满整个视口，页面滚动时会跟着偏移
• 未做body滚动锁定，模态框弹出后底层内容仍可滚动
• 模态框内容区未设置滚动边界，长内容会直接撑出容器
• JS选择器和HTML类名/标签不匹配，且逻辑绑定唯一id，无法支持多模态框复用

完整实现代码 #

通用CSS样式（所有模态框共用） #

body,
html{
  margin: 0;
  height: 100%;
}
/* 模态框打开时锁定底层页面滚动 */
body.modal-open {
  overflow: hidden;
}
.button {
  color: rgba(0, 0, 0, .8);
  text-decoration: none;
  font-size: 1.2em;
  padding: 5px 10px;
  border: 1px solid rgba(0, 0, 0, .8);
  margin: 40px 0 0 40px; 
  display: inline-block;
  transition: all .1s ease-in-out;
  cursor: pointer;
}
.button:hover {
  background-color: rgba(0, 0, 0, .8);
  color: whitesmoke;
}
/* 通用模态框容器样式 */
.modal {
  margin: 0;
  opacity: 0;
  position: fixed;
  left: 0;
  top: 0;
  visibility: hidden;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  transition: all .4s ease-in-out;
  background: #1D1F20;
  overflow-y: auto;
  z-index: 999;
}
/* 模态框打开状态 */
.modal.active {
  opacity: 1;
  visibility: visible;
}

.modal .header,
.modal .footer {
  border-bottom: 1px solid #1ABC9C;
  border-radius: 0;
}
.modal .footer {
  border: none;
}
.modal h2 {
  margin: 0;
  color: whitesmoke;
}
.modal .copy,
.modal .header,
.modal .footer {
  padding: 10px;
  color: whitesmoke;
}
.modal-content {
  position: relative;
  z-index: 20;
  color: #fff;
  width: 50%;
  margin: 5vh auto;
}
.modal .copy {
  background: #1D1F20;
  /* 若需要仅内容区滚动、模态框头部固定，放开下面两行注释即可 */
  /* max-height: 70vh;
  overflow-y: auto; */
}
.copy a {
  color: #fff;
  text-decoration: none;
  display: inline-block;
  padding: 5px 10px;
  border: 1px solid white;
  transition: all .2s ease-in-out;
  cursor: pointer;
}
.copy a:hover {
  background-color: rgba(255, 255, 255, .1);
}

HTML结构（支持多模态框无限复用） #

<!-- 页面长测试内容 保留原有段落即可 -->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae expedita corrupti laudantium aperiam, doloremque explicabo ipsum earum dicta saepe delectus totam vitae ipsam doloribus et obcaecati facilis eius assumenda, cumque.</p>
<!-- 省略重复的测试段落 -->

<!-- 第一个模态框 -->
<div id="modal-1" class="modal">
  <div class="modal-content">
    <div class="header">
      <h2>第一个模态框标题</h2>
    </div>
    <div class="copy">
      <p>模态框内容区，支持任意长度文本，超出部分自动在模态框内部滚动</p>
      <a href="javascript:;" class="modal-close">关闭模态框</a> 
    </div>
  </div>
</div>

<!-- 第二个模态框 无需额外写逻辑 直接复用 -->
<div id="modal-2" class="modal">
  <div class="modal-content">
    <div class="header">
      <h2>第二个模态框标题</h2>
    </div>
    <div class="copy">
      <p>第二个模态框内容，所有交互逻辑和样式完全复用</p>
      <a href="javascript:;" class="modal-close">关闭模态框</a> 
    </div>
  </div>
</div>

<!-- 触发按钮 通过data属性绑定要打开的模态框id -->
<a class="button modal-trigger" data-modal-target="#modal-1" href="javascript:;">
  打开第一个模态框
</a>
<a class="button modal-trigger" data-modal-target="#modal-2" href="javascript:;">
  打开第二个模态框
</a>

通用JS逻辑（全页面模态框统一初始化，无需重复编写） #

function initModals() {
  const triggers = document.querySelectorAll('.modal-trigger');
  const closeBtns = document.querySelectorAll('.modal-close');
  const modals = document.querySelectorAll('.modal');

  // 打开指定模态框
  function openModal(modal) {
    if (!modal) return;
    modal.classList.add('active');
    document.body.classList.add('modal-open');
  }

  // 关闭所有已打开的模态框
  function closeModals() {
    modals.forEach(modal => modal.classList.remove('active'));
    document.body.classList.remove('modal-open');
  }

  // 绑定打开事件
  triggers.forEach(trigger => {
    trigger.addEventListener('click', (e) => {
      e.preventDefault();
      const target = document.querySelector(trigger.getAttribute('data-modal-target'));
      closeModals();
      openModal(target);
    })
  })

  // 绑定关闭按钮事件
  closeBtns.forEach(btn => {
    btn.addEventListener('click', closeModals);
  })

  // 点击遮罩区域关闭模态框
  modals.forEach(modal => {
    modal.addEventListener('click', (e) => {
      if (e.target === modal) closeModals();
    })
  })

  // 按ESC键关闭模态框
  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') closeModals();
  })
}

// 页面加载完成后自动初始化所有模态框
document.addEventListener('DOMContentLoaded', initModals);

实现效果 #

• 模态框打开时自动锁定body滚动，底层页面完全无法滑动
• 模态框通过fixed定位铺满整个视口，不会随页面滚动偏移
• 模态框内容超长时仅内部区域滚动，不影响底层页面
• 后续新增模态框仅需两步：给模态框容器加class="modal"和唯一id、添加带class="modal-trigger"和data-modal-target="#对应id"的触发按钮，无需编写任何额外JS逻辑

内容的提问来源于stack exchange，提问作者User