hidden.bs.modal 是 modal 关闭后执行清理逻辑的唯一可靠时机，它在 css 动画结束、display: none 生效、dom 彻底不可见后触发，此时读取表单值、重置输入框、移除校验提示、释放资源均安全。
hidden.bs.modal 是 Modal 关闭后执行清理逻辑的唯一可靠时机
它在 CSS 动画完全结束、display: none 已生效、DOM 视觉上彻底不可见之后才触发。此时读取表单值、重置输入框、移除校验提示、释放资源都是安全的。别用 hide.bs.modal——它在动画刚启动时就触发，DOM 还挂着，offsetHeight 仍大于 0，容易导致样式闪动或操作失败。
常见错误现象包括：在 hide.bs.modal 里调用 form.reset() 后看到输入框闪一下才清空；或用 $(this).find('input') 取不到值，因为 DOM 尚未进入隐藏状态，但事件回调已执行。
监听必须在 Modal 元素存在后再绑定，否则静默失效
如果你的 Modal 是动态插入（比如 AJAX 加载进来的），直接写 document.getElementById('myModal').addEventListener('hidden.bs.modal', ...) 会报错或不触发，因为元素还没挂到 DOM 上。
- 静态 HTML 中：确保代码放在
DOMContentLoaded之后，或包裹在$(document).ready(...)（jQuery 项目） - 动态插入场景：改用事件委托，例如
document.addEventListener('hidden.bs.modal', function (e) { if (e.target.id === 'myModal') { /* 处理 */ } }) - Vue/React 项目中：不要在
mounted/useEffect里反复初始化 Modal 实例，更别重复绑定事件；务必在组件卸载前解绑，如modalEl.removeEventListener('hidden.bs.modal', handler)
Bootstrap 4 和 5 的初始化方式不同，但事件名一致
hidden.bs.modal 这个事件名在 Bootstrap 4 和 5 中完全一样，但 Modal 实例获取和控制方式变了，混用会导致监听失效。
- Bootstrap 4：依赖 jQuery，常用
$('#myModal').modal('show')，事件也用$('#myModal').on('hidden.bs.modal', ...) - Bootstrap 5：原生 JS，推荐
import { Modal } from 'bootstrap'，然后const myModal = Modal.getOrCreateInstance(modalEl)，再用myModal.hide()和modalEl.addEventListener('hidden.bs.modal', ...) - 关键点：Bootstrap 5 不再支持
$().modal()，若项目升级后还沿用 jQuery 写法，事件监听会静默不工作
双层 Modal 或手动 hide() 调用时，hidden.bs.modal 依然有效
无论用户点关闭按钮、按 ESC、点 backdrop，还是代码里调用 modal.hide() 或 $('#myModal').modal('hide')，hidden.bs.modal 都会触发。这点很稳定，可以放心依赖。
但要注意：event.relatedTarget 只在用户交互关闭时有值（比如点击的按钮元素），程序调用 hide() 时为 null。所以别靠它判断关闭来源，需要区分场景请加自定义标记（如设置 data-trigger="js"）。
另外，双层 Modal 场景下，如果子 Modal 关闭时父 Modal 也被意外遮罩锁定，大概率是因为没正确移除 .modal-backdrop ——这不是事件监听问题，而是关闭后 DOM 清理遗漏，需单独检查 $('.modal-backdrop').remove() 是否执行到位。
