Modal.show()是唯一可靠的手动触发方式；需先用bootstrap.Modal.getInstance()检查实例化，动态插入时须插入DOM后再new实例；hide()仅隐藏，dispose()才销毁，后者用于DOM移除或重复重建场景。
Modal.show() 是唯一可靠的手动触发方式
bootstrap 5 取消了 $().modal('show') 这类 jquery 写法，也不再支持 data-bs-toggle 以外的隐式初始化。必须先确保 dom 元素已由 bootstrap 的 js 初始化过，否则直接调用 show() 会报 typeerror: modalel.show is not a function。
- 手动触发前，检查元素是否已被 Bootstrap 实例化：用
bootstrap.Modal.getInstance(modalEl)返回实例则说明已就绪；返回null就得先 new 一个 - 推荐写法是显式构造：
const myModal = new bootstrap.Modal(document.getElementById('myModal'));，再调myModal.show() - 如果模态框是动态插入的（比如 AJAX 加载后 append），必须在插入 DOM 后、调用
show()前完成实例化，不能依赖自动扫描
隐藏 Modal 时别漏掉 hide() 和 dispose() 的区别
hide() 只关闭显示，保留实例和事件监听；dispose() 彻底销毁实例，后续再调 show() 会失效。多数场景只需 hide()，但以下情况必须 dispose()：
- 模态框 DOM 被移除（如
remove()或 Vue/React 卸载） - 同一 ID 的模态框被多次重建（比如表格行点击打开不同内容），不
dispose()会导致旧实例残留、事件重复绑定 - 调用
dispose()后，必须重新new bootstrap.Modal(...)才能再次使用
触发前检查 backdrop 和 keyboard 参数是否冲突
默认 backdrop: true + keyboard: true 没问题，但若设为 backdrop: 'static'（点背景不关闭），却没关 keyboard，用户按 Esc 仍会关闭——这常被当成“bug”。真实逻辑是：两者独立生效，不存在自动联动。
- 想禁用 Esc 关闭，必须显式设
keyboard: false -
backdrop: false时，点背景无反应，但 Esc 仍有效（除非也设keyboard: false） - 参数只能在初始化时传入，无法运行时动态修改；改配置必须先
dispose()再重建实例
常见错误：用 document.querySelector 找不到模态框元素
不是选择器写错，而是模态框 HTML 还没加载进 DOM。典型发生于：Vue v-if 切换、React useState 控制显隐、或脚本放在 <head> 里执行。
- 确保执行
new bootstrap.Modal(...)时，目标<div id="xxx">已存在于document.body - 在框架中，应放在组件挂载后（Vue
mounted、ReactuseEffect(() => {}, [])） - 纯 HTML 页面，把 JS 放在
</body>前，或包装在DOMContentLoaded里
