如何在Bootstrap Modal中显示Offcanvas组件

可以在Bootstrap Modal中嵌入Offcanvas组件，但默认存在层级遮挡问题——Offcanvas会被Modal的背景层或内容区覆盖，需要调整布局和样式来解决。

问题分析 #

你的代码中将Offcanvas放在了modal-content内部，导致Offcanvas受Modal容器的overflow和层级限制，无法正常显示在Modal之上。Bootstrap默认的Modal z-index（1055）高于Offcanvas（1045），即使调整位置，也需要手动提升Offcanvas的层级。

修复方案 #

修改要点 #

1. 将Offcanvas移出Modal容器，放置在<body>根节点下，避免被Modal裁剪
2. 自定义CSS提升Offcanvas的z-index，确保显示在Modal之上
3. 保持触发按钮的逻辑不变

完整代码 #

<!-- Bootstrap 依赖 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"></script>

<!-- 自定义CSS：提升Offcanvas层级 -->
<style>
/* 确保Offcanvas显示在Modal之上（Modal默认z-index是1055） */
.modal-open .offcanvas {
    z-index: 1060;
}
</style>

<!-- 第一个Modal -->
<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        点击下方按钮打开右侧Offcanvas
        <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">打开右侧Offcanvas</button>
      </div>
      <div class="modal-footer">
        模态框底部
      </div>
    </div>
  </div>
</div>

<!-- 第二个Modal -->
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        点击下方按钮关闭当前模态框并返回第一个
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal" data-bs-dismiss="modal">返回第一个模态框</button>
      </div>
    </div>
  </div>
</div>

<!-- Offcanvas：移到根层级 -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
  <div class="offcanvas-header">
    <h5 id="offcanvasRightLabel">右侧Offcanvas</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    这里可以放置Offcanvas的自定义内容
  </div>
</div>

<!-- 打开第一个Modal的按钮 -->
<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">打开第一个模态框</a>

<!-- 可选：关闭Modal时自动关闭Offcanvas -->
<script>
document.getElementById('exampleModalToggle').addEventListener('hidden.bs.modal', function () {
  const offcanvas = new bootstrap.Offcanvas(document.getElementById('offcanvasRight'));
  offcanvas.hide();
});
</script>

额外注意事项 #

• 关闭Modal时建议同步关闭Offcanvas，避免Offcanvas留在页面上
• 如果使用多个嵌套Modal，需要为每个对应的Offcanvas设置递增的z-index
• 测试响应式场景，确保Offcanvas在小屏幕上正常显示

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