Bootstrap模态框二次切换后消失的原因排查求助

问题原因 #

你手动执行的$("body").removeClass("modal-open");和$(".modal-backdrop").remove();破坏了Bootstrap模态框的内部状态管理机制。

Bootstrap的modal("hide")方法本身已经封装了完整的关闭逻辑：它会自动移除body的modal-open类、销毁并移除背景层，同时同步更新模态框组件的内部状态标记。你额外手动操作DOM后，组件内部状态和实际DOM结构出现了不一致——当你再次触发模态框打开时，组件误以为背景层或状态未完成重置，导致显示逻辑异常，最终出现模态框一闪而过、背景层残留的问题，且模态框被错误设置为display:none。

解决方案 #

1. 删除手动DOM操作代码，仅保留Bootstrap官方提供的关闭方法：

$("#my-modal-id").modal("hide");

这一行代码会自动完成所有关闭后的清理工作，确保模态框内部状态和DOM完全同步，下次可以正常触发打开。

2. 若需在模态框完全关闭后执行额外逻辑（比如重置表单），请使用Bootstrap提供的hidden.bs.modal事件，而非手动操作DOM：

$("#my-modal-id").on("hidden.bs.modal", function() {
  // 模态框完全关闭后执行的逻辑，例如重置表单
  $(this).find("form")[0].reset();
});

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