Bootstrap 5 如何实现相对于父容器的全屏modal模态框

要实现相对于main容器定位的全屏模态框，只需要做以下调整即可，无需修改大量默认逻辑：

方案1：原生属性适配（Bootstrap 5适用，最简洁） #

Bootstrap 5原生支持指定模态框的挂载容器，直接给模态框加data-bs-container属性即可：

<div class="main overflow-auto position-relative">
  <!-- 主内容 -->
  <div class="modal fade" data-bs-container=".main">
    <div class="modal-dialog modal-fullscreen">
      <!-- 模态框内容 -->
    </div>
  </div>
</div>

这个属性会自动把模态框和遮罩层都挂载到.main容器下，自动适配相对定位规则，不需要额外写自定义CSS。

方案2：自定义CSS兼容（全版本适用） #

如果是更低版本的Bootstrap，加几行自定义CSS即可解决：

/* 覆盖模态框默认固定定位，改为相对于父级绝对定位 */
.main .modal {
  position: absolute;
}
/* 遮罩层同步改为绝对定位，仅覆盖main区域 */
.main .modal-backdrop {
  position: absolute;
  inset: 0; /* 等价于top/left/right/bottom都设为0 */
}
/* 模态框打开时锁住main区域滚动，保持交互体验一致 */
body.modal-open .main {
  overflow: hidden !important;
}

你之前出现样式混乱的核心原因是只修改了模态框本身的定位，没有同步调整遮罩层的定位规则，默认遮罩层还是固定在整个视口上，自然会出现样式错位。

注意：你已经给.main加了position: relative属性，刚好满足相对定位的前置条件，不需要额外调整结构。

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