Bootstrap 5中data-bs-dismiss失效模态框切换旧弹窗无法关闭

算力阿峰

2026-10-5

问题原因

Bootstrap模态框默认带fade过渡动画，关闭动画需要约300ms才能完成，你同时在按钮上绑定了data-bs-dismiss="modal"（关闭旧模态框）和data-bs-toggle="modal"（打开新模态框），两个动作几乎同时触发，旧模态框的关闭逻辑还没执行完、背景遮罩还没销毁，新模态框就已经渲染，就会出现叠加问题。
你使用的Bootstrap 5.1.0版本本身存在模态框切换的已知缺陷，官方在后续小版本中修复了这个场景的执行时序问题。

解决方法

方法1：移除过渡动画（最快修复）

把两个模态框根元素的fade类删掉，没有过渡动画的情况下关闭操作会立即执行，不会出现时序冲突：

<!-- 修改前 -->
<div class="modal fade" id="modal_debug" tabindex="-1">
<!-- 修改后 -->
<div class="modal" id="modal_debug" tabindex="-1">

modal_newAvatar也做同样修改即可。

方法2：用JS手动控制切换时序（保留动画效果）

删掉按钮上的data-bs-toggle、data-bs-target属性，手动监听按钮点击事件，等旧模态框完全关闭后再打开新模态框：

// 先获取模态框实例
const debugModal = new bootstrap.Modal(document.getElementById('modal_debug'))
const newAvatarModal = new bootstrap.Modal(document.getElementById('modal_newAvatar'))

// 监听Novo Avatar按钮点击
document.querySelector('button[data-bs-target="#modal_newAvatar"]').addEventListener('click', function() {
  // 先关闭旧模态框
  debugModal.hide()
  // 监听旧模态框关闭完成事件
  document.getElementById('modal_debug').addEventListener('hidden.bs.modal', function () {
    // 完全关闭后再打开新模态框
    newAvatarModal.show()
  }, { once: true }) // 只监听一次，避免重复触发
})