页面加载即显示 Bootstrap 模态框必须用 JavaScript 显式调用 show()，HTML 中的 class="show" 或 data-bs-show="true" 无效；需确保 DOM 就绪、避免重复初始化、移除 fade 类调试、保留 tabindex="-1" 并正确处理异步内容。
页面加载即显示 Bootstrap 模态框，必须用 JavaScript 显式调用 show()，HTML 中加 class="show" 或 data-bs-show="true" 完全无效。
DOM 就绪后才能调用 show()
脚本若在 <head> 里执行，或没等 DOM 加载完就查 document.getElementById('myModal')，结果是 null，后续调 show() 直接报错：Cannot read properties of null (reading 'show')。
- 原生 JS 推荐写法：
document.addEventListener('DOMContentLoaded', () => { new bootstrap.Modal(document.getElementById('myModal')).show(); }); - 如果用 jQuery（仅 Bootstrap 4），必须包在
$(function() { ... })里，不能裸写$('#myModal').modal('show') - Vue/React 用户注意：得在
mounted或useEffect里触发，且确保模态框 DOM 已挂载（必要时加$nextTick或setTimeout(..., 0)）
fade 类会导致“看不见”的假象
默认带 class="modal fade"，动画从透明到不透明，但初始状态是 opacity: 0 + display: none。如果 JS 调了 show() 却没看到弹窗，大概率是它正在淡入、或被卡在动画起始帧。
- 调试时先删掉
fade类，看能否硬切出来；确认能显示后再加回 - 检查
.modal-dialog和.modal-content是否有子节点——空内容会撑不起高度，导致只有一条细线或完全不可见 -
tabindex="-1"必须保留，否则键盘按Esc关不了，焦点管理也会出问题
避免重复初始化和懒加载时机错乱
同一个模态框元素多次执行 new bootstrap.Modal(...)，第二次会直接抛错：Modal is already initialized。另外，如果 Modal 内容靠 fetch 异步加载，却在数据返回前就调 show()，就会出现“黑背景+空内容”的假失败。
- 初始化前先检查是否已存在实例：
if (!modalInstance) modalInstance = new bootstrap.Modal(...) - 懒加载内容，监听
show.bs.modal（不是shown.bs.modal），在 DOM 渲染前注入 HTML 片段 - 服务端返回的 HTML 必须是纯片段（不含
<html>、<body>），否则innerHTML解析会丢内容或结构错乱
最容易被忽略的是：模态框自动弹出从来不是靠 HTML 属性驱动的，而是 JS 实例生命周期与 DOM 状态严格对齐的结果。哪怕只差几毫秒的执行顺序，或者一个没清空的旧内容容器，都会让整个弹窗“消失”在视觉里。
