Bootstrap Modal 初始化后不会自动弹出，必须显式调用 show() 方法；需确保 DOM 就绪、避免重复初始化、检查 backdrop/keyboard 属性及内容加载状态。
Modal 初始化后未手动调用 show() 方法
Bootstrap 的 Modal 默认不会自动弹出，即使你在 HTML 中加了 class="show" 或 data-bs-show="true"，也不起作用。Bootstrap 5+ 完全移除了自动触发逻辑，必须显式调用 JavaScript 方法。
常见错误是只写 HTML 结构，没配 JS 初始化或调用：
<div class="modal fade" id="myModal">...</div>
这只会创建一个隐藏的模态框 DOM 节点，fade 类还让它初始不可见。解决方式很简单：
- 确保 Modal 元素已存在于 DOM 中（不要在
document.addEventListener('DOMContentLoaded', ...)之前就调show()） - 用
new bootstrap.Modal(...).show()显式打开 - 或用
bootstrap.Modal.getInstance(...)?.show()复用已有实例（避免重复初始化）
DOM 尚未就绪就执行 show()
如果脚本放在 <head> 里，或没等 DOM 加载完就运行 document.getElementById('myModal')，会拿到 null，后续调用 show() 直接报错：Cannot read properties of null (reading 'show')。
正确做法是确保 DOM 就绪后再操作：
- 把 script 标签放页面底部（
</body>前） - 或包裹在
document.addEventListener('DOMContentLoaded', () => { ... }) - 或用
$(document).ready(...)（仅 jQuery 版本）
注意：Bootstrap 5 不再依赖 jQuery，所以别混用 $().modal('show') 和原生 API —— 会报 modal is not a function。
data-bs-backdrop="static" 或 data-bs-keyboard="false" 导致误判“没弹出”
有些开发者发现 Modal “看不见”，其实是它弹出了但背景变暗后内容区域为空、或高度为 0，尤其当 Modal 内容是异步加载（比如 fetch 渲染）却没等数据返回就 show()，就会出现“黑屏无内容”的假象。
检查是否用了这些属性却不配合内容准备：
-
data-bs-backdrop="static"：禁用点击遮罩关闭，但不阻止显示 -
data-bs-keyboard="false"：禁用 Esc 关闭，同样不影响弹出本身 - 真正影响可见性的只有
fade类（控制淡入动画）、show类（强制显示，但需搭配display: block才生效）
建议调试时先去掉 fade 类，看是否能硬切出来；再确认 .modal-dialog 和 .modal-content 有实际子节点且非空。
多个 Modal 实例冲突或重复初始化
如果页面里多次执行 new bootstrap.Modal(...) 同一个元素，第二次会抛错：Modal is already initialized。而如果你忽略这个错误继续调 show()，可能什么都不会发生。
安全做法是先查实例是否存在：
const modalEl = document.getElementById('myModal');
const modal = bootstrap.Modal.getInstance(modalEl) || new bootstrap.Modal(modalEl);
modal.show();
另外，如果 Modal HTML 是动态插入（如通过 innerHTML 注入），要确保插入后再初始化，否则 getElementById 找不到。
容易被忽略的是：Modal 内部如果有 form 或 input，且页面其他地方有 autofocus 属性或 focus() 调用，可能触发浏览器滚动或焦点抢占，让 Modal 看起来“闪一下就没了”。这时候得检查 focusable 元素和 tabindex 设置。
