点击确认按钮后延时关闭modal需确保模态框处于已显示状态，故应检查modal._isshown后再调用settimeout(modal.hide, 400)，并监听hidden.bs.modal事件在动画结束后刷新页面，同时移除按钮的data-bs-dismiss="modal"属性以防冲突。
点击确认按钮后延时关闭 Modal
直接调用 modal.hide() 会立刻关闭，要延时就得把 hide() 塞进 setTimeout 里，但关键不是“怎么延”，而是“延的时候 Modal 还在不在”——必须确保模态框处于已显示状态，否则 setTimeout 执行时可能已被手动关闭，再调 hide() 就无效或报错。
- 监听
shown.bs.modal事件获取稳定状态，但这里不需要；点击确认时 Modal 肯定是开着的，所以只需检查modal._isShown - 延时逻辑写在确认按钮的 click 处理函数里，别写在
hidden.bs.modal或其他生命周期钩子中 - 推荐延时 300–500ms，太短用户没感知，太长像卡顿
示例：
document.getElementById('confirmBtn').addEventListener('click', function () {
const modalEl = document.getElementById('myModal');
const modal = bootstrap.Modal.getInstance(modalEl);
if (modal && modal._isShown) {
setTimeout(() => modal.hide(), 400);
}
});
关闭后再刷新父页面
不能在 setTimeout 里直接写 location.reload()，因为 modal.hide() 是异步动画过程，location.reload() 必须等关闭动画彻底结束、DOM 回收完成之后再执行，否则可能刷新时页面还残留 backdrop 或焦点异常。
- 正确时机是监听
hidden.bs.modal事件，它在动画结束、所有清理工作完成后触发 - 避免全局监听所有 Modal，只对目标模态框绑定，防止干扰其他弹窗
- 刷新前可加个简单判断，比如检查
e.target === modalEl，防误触
示例：
modalEl.addEventListener('hidden.bs.modal', function (e) {
if (e.target === modalEl) {
location.reload();
}
});
确认按钮上别留 data-bs-dismiss="modal"
如果按钮同时有 data-bs-dismiss="modal" 和自定义 click 事件，就会出现「点一下就关、Ajax 没发完」或者「点了没反应（dismiss 抢先关闭，你的逻辑被跳过）」——这是最常踩的坑。
- 删掉按钮上的
data-bs-dismiss="modal"属性，完全交由 JS 控制关闭节奏 - 按钮类型设为
type="button"，避免表单默认提交干扰 - 如果用了 form inside Modal，记得
event.preventDefault()防止页面跳转
为什么不用 jQuery 写法
知识库里混着大量 jQuery 示例（如 $('#myModal').modal('hide')），但 Bootstrap 5 官方已移除 jQuery 依赖，所有实例都得通过 bootstrap.Modal.getInstance() 获取。直接用 jQuery 选择器 + .modal() 在纯 Bootstrap 5 环境下会报 $.modal is not a function。
-
bootstrap.Modal.getInstance(modalEl)是唯一可靠方式，返回已有实例；若未初始化过会返回 null - 不要每次点击都 new 一个新实例，浪费资源且可能状态错乱
- 确保引入的是
bootstrap.bundle.min.js（含 Popper），不是仅 CSS 或单独 JS
真正容易被忽略的是：hidden.bs.modal 事件只触发一次，且不重试。如果用户快速连点两次确认按钮，第一次触发了 hide()，第二次再点时 modal._isShown 已为 false，setTimeout 里的 hide() 就不会执行——但 hidden.bs.modal 也不会重复触发。这种竞态需要业务层加防抖或按钮禁用处理。
