如何在Bootstrap 5模态框中创建覆盖模态框和遮罩层的元素

核心思路 #

Bootstrap 5 默认的模态框层级：.modal-backdrop（遮罩层）z-index 为 1050，.modal（模态框容器）z-index 为 1055。要实现同时覆盖两者的元素，只需创建一个z-index 高于 1055的全屏固定定位元素即可。

实现步骤 #

1. 添加覆盖元素结构

在 <body> 内、模态框同级位置添加全屏覆盖元素（不要放在模态框内部，避免被模态框的 overflow 限制）：

<!-- Bootstrap 5 模态框 -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">示例模态框</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        模态框内容
      </div>
    </div>
  </div>
</div>

<!-- 全屏覆盖元素 -->
<div class="full-overlay"></div>

2. 编写CSS样式

设置覆盖元素的定位、层级和显示状态：

.full-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.7); /* 自定义背景，比如半透明黑 */
  z-index: 1060; /* 必须高于模态框的1055 */
  display: none; /* 默认隐藏 */
  pointer-events: auto; /* 确保可以拦截点击事件 */
}

/* 激活状态：显示覆盖层 */
.full-overlay.active {
  display: block;
}

3. 绑定模态框事件控制显示

利用Bootstrap模态框的内置事件，在模态框显示/隐藏时同步控制覆盖元素：

const modal = document.getElementById('exampleModal');
const overlay = document.querySelector('.full-overlay');

// 模态框开始显示时，激活覆盖层
modal.addEventListener('show.bs.modal', () => {
  overlay.classList.add('active');
});

// 模态框隐藏时，关闭覆盖层
modal.addEventListener('hide.bs.modal', () => {
  overlay.classList.remove('active');
});

关键注意事项 #

• z-index 数值：必须大于Bootstrap模态框默认的1055，建议设为1060或更高，避免层级冲突。
• 定位方式：必须用position: fixed，确保覆盖整个浏览器视口，不受页面滚动影响。
• 元素位置：不要将覆盖元素放在模态框内部，否则会被模态框的position: relative和overflow属性限制范围。

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