必须用 DOMContentLoaded 事件包裹延时逻辑，否则 document.getElementById('myModal') 极大概率返回 null 导致 show() 报错；因脚本在 head 中执行时 DOM 未就绪，setTimeout 仅延迟不等待就绪，需先监听 DOMContentLoaded 再启动计时器并判空。
必须用 DOMContentLoaded 事件包裹延时逻辑，否则 document.getElementById('myModal') 极大概率返回 null，调 show() 直接报错。
为什么 setTimeout(() => { new bootstrap.Modal(...).show() }, 2000) 常常不生效
它只延迟执行，不等 DOM 就绪。脚本若在 <head> 中运行，此时 <div id="myModal"> 还没解析，getElementById 返回 null，后续调 show() 报 Cannot read properties of null (reading 'show')。
- 错误写法：直接写
setTimeout，没包任何就绪监听 - 正确前提：确保已加载
bootstrap.bundle.min.js（含 Popper 和 Bootstrap JS） - 更稳妥的做法是把脚本放在
</body>前，或显式监听DOMContentLoaded
DOM 就绪后延时弹出的可靠写法
先等页面结构加载完成，再启动计时器，且加空值判断防崩。
- 推荐写法：
document.addEventListener('DOMContentLoaded', () => { setTimeout(() => { const modalEl = document.getElementById('myModal'); if (modalEl) { new bootstrap.Modal(modalEl).show(); } }, 2000); }); - Vue 用户应在
mounted钩子中执行，并加nextTick或setTimeout(, 0)确保模态框 DOM 已挂载 - React 用户同理，在
useEffect里触发，且依赖数组为空（[]），避免重复初始化
延时弹出后黑底有、内容空白？多半是内容没加载完
不是 JS 没跑，而是 show() 调得太早——尤其当 Modal 内部依赖异步 HTML、Select2、日期控件等需手动初始化的元素时。
- 别在
setTimeout里直接show()，改用show.bs.modal事件钩子 - 在该事件中动态注入 HTML 并初始化内部组件，例如：
modalEl.addEventListener('show.bs.modal', async function(e) { const body = modalEl.querySelector('.modal-body'); body.innerHTML = '<div class="text-center">Loading</div>'; try { const html = await fetch('/form.html').then(r => r.text()); body.innerHTML = html; initSelect2(body.querySelectorAll('select')); } catch (err) { body.innerHTML = 'Load failed'; } }); - 注意：服务端返回的 HTML 必须是纯片段（不含
<html>、<body>），否则innerHTML会被浏览器自动剥离
避免重复初始化和动画干扰
同一个 modalEl 多次执行 new bootstrap.Modal() 会抛 Modal is already initialized；而 fade 类会让初始 opacity=0，导致“调了 show 却看不见”。
- 初始化前加判断：
if (!window.myModalInstance) window.myModalInstance = new bootstrap.Modal(modalEl) - 调试阶段可临时去掉
fade类，确认是否是动画卡住 - 不要混用
data-bs-toggle="modal"和 JSshow()，否则可能触发两次打开逻辑，引发冲突闪退
最易被忽略的是：延时逻辑必须与 DOM 就绪、Bootstrap JS 加载、内容加载三者严格串行，缺一不可；任意一环提前或滞后，都会表现为“没弹出来”或“弹空了”。
