Bootstrap 5 从模态框打开新模态框不关闭原框问题求助

在Bootstrap 5中，默认行为是打开新模态框时自动隐藏已打开的模态框，这和Bootstrap 4的表现不同。要实现不关闭第一个模态框的同时打开确认模态框，可通过以下两种方式解决：

方法一：阻止模态框的默认隐藏行为 #

给触发第二个模态框的元素绑定show.bs.modal事件，阻止事件冒泡，避免第一个模态框被自动隐藏：

// 假设触发确认模态框的元素选择器为#open-confirm-modal
document.querySelector('#open-confirm-modal').addEventListener('show.bs.modal', function(e) {
  e.stopPropagation();
});

方法二：通过JavaScript手动控制模态框显示 #

放弃使用data-bs-*属性触发，改用JS实例化并显示第二个模态框，同时可配置静态背景防止意外关闭：

<!-- 第一个模态框内的触发按钮 -->
<button id="trigger-confirm" class="btn btn-danger">打开确认框</button>

<!-- 确认模态框结构 -->
<div class="modal fade" id="confirm-modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <p>确认执行此操作吗？</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary">确认</button>
      </div>
    </div>
  </div>
</div>

document.getElementById('trigger-confirm').addEventListener('click', function() {
  const confirmModal = new bootstrap.Modal(document.getElementById('confirm-modal'), {
    backdrop: 'static', // 点击背景不关闭模态框
    keyboard: false     // 按ESC键不关闭模态框（可选配置）
  });
  confirmModal.show();
});

需要注意的是，Bootstrap 5官方并未推荐模态框叠加的使用方式，这种场景下建议优先考虑使用模态框内的组件（如警告提示、确认按钮组）替代叠加模态框，以保持界面简洁性和用户体验一致性。

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