Bootstrap 5.x多模态框切换不同步问题求助

Bootstrap 5移除jQuery依赖后，模态框的hide()方法是异步执行的（包含过渡动画逻辑），直接在hide()后调用show()会导致DOM状态不同步，出现切换异常。不用Promise也能解决，核心是利用Bootstrap模态框的隐藏完成事件触发下一个模态框的显示，完全贴合原生组件的生命周期。

修改后的代码实现 #

// 用对象统一管理模态框实例，简化代码
const modals = {
  modal1: new bootstrap.Modal(document.querySelector('#modal_1')),
  modal2: new bootstrap.Modal(document.querySelector('#modal_2')),
  modal3: new bootstrap.Modal(document.querySelector('#modal_3')),
  modal4: new bootstrap.Modal(document.querySelector('#modal_4'))
};

function closeAfterOpen() {
  // 监听modal1的隐藏完成事件
  modals.modal1._element.addEventListener('hidden.bs.modal', function handler() {
    // 显示modal2
    modals.modal2.show();
    // 移除事件监听，避免重复触发
    this.removeEventListener('hidden.bs.modal', handler);
  });
  // 触发modal1隐藏
  modals.modal1.hide();
}

关键说明 #

• hidden.bs.modal事件是模态框完全隐藏（过渡动画结束、DOM状态更新完成）时才会触发的事件，此时调用另一个模态框的show()，能保证状态完全同步。
• 每次触发后移除事件监听，防止多次调用closeAfterOpen时重复绑定事件，导致逻辑混乱。
• 这种方式完全基于Bootstrap原生事件机制，没有用到Promise，既解决了同步问题，又符合你不想用Promise的需求。

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