必须等 DOM 加载完成再执行延时弹出，否则因元素未就绪导致报错；需确保模态框静态存在、ID 正确、避免重复初始化，并在数据/插件就绪后再调用 show()，同时注意 fade 动画干扰。
DOM 就绪后才能执行延时弹出
直接写 setTimeout 会报 Cannot read properties of null (reading 'show')，因为脚本可能在 <head> 中执行，此时 document.getElementById('myModal') 拿不到元素。必须等 DOM 加载完成再启动延时逻辑。
正确做法是把 setTimeout 套在 DOMContentLoaded 事件里：
- 确保 Bootstrap 的 JS（推荐
bootstrap.bundle.min.js）已在<head>或页面顶部加载完毕 - 模态框 HTML 必须在页面中静态存在，不能靠 JS 动态插入后再调
show() - 检查模态框是否有
id="myModal"，且没被重复定义或拼写错误
延时弹出要防重复初始化
如果页面里多次执行 new bootstrap.Modal(...)，第二次就会抛错：Modal is already initialized。尤其在刷新后反复触发时容易踩坑。
稳妥写法是先查实例是否存在，再创建并调用：
<pre class="brush:php;toolbar:false;">document.addEventListener('DOMContentLoaded', () => {
const modalEl = document.getElementById('myModal');
if (!modalEl) return;
// 避免重复 new
let modalInstance;
if (!modalInstance) {
modalInstance = new bootstrap.Modal(modalEl);
}
setTimeout(() => {
if (modalInstance && modalEl) {
modalInstance.show();
}
}, 3000);
});
内容为空？大概率是 show 太早
延时弹出后只看到黑底、没内容，不是 JS 没跑，而是 Modal 内部依赖的异步数据或第三方组件（如 Select2、日期控件）还没就绪。
常见场景和应对方式：
- Modal 内容由
fetch 加载：把 <code>show()移到then或await后，而不是单纯等 3 秒 - 需要手动初始化插件：监听
show.bs.modal事件，在回调里注入 HTML 并初始化，而不是在DOMContentLoaded里硬上 - 用了 Vue/React：必须在
mounted或useEffect里触发，并加nextTick或setTimeout(..., 0)确保 DOM 渲染完成
别让 fade 动画干扰判断
加了 fade 类的 Modal 默认有淡入动画，3 秒后调 show()，你可能以为它没弹，其实是正在缓慢 opacity 变化——尤其在低性能设备上更明显。
快速验证是否真失败：
- 临时删掉
fade类，看是否“瞬间弹出”；如果可以，说明只是动画太慢或被卡住 - 检查浏览器控制台有没有 CSS 相关警告，比如
.modal.fade .modal-dialog的transition被其他样式覆盖 - 不要改
animation: true参数去调时长——它只接受布尔值，传毫秒数无效
真正要调动画速度，得覆盖 CSS 里的 transition，且限定作用域为 .modal.fade .modal-dialog，否则会影响 Alert、Offcanvas 等其他组件。
