Bootstrap 模态框（Modal）点击外部区域禁止关闭

<p>必须同时设置 data-bs-backdrop="static" 和 data-bs-keyboard="false" 才能彻底禁用模态框关闭：前者阻止点击背景关闭，后者禁用 ESC 键关闭；仅设其一或使用错误值（如 false、漏 bs- 前缀）均会导致意外关闭。</p>

data-bs-backdrop="static" 是唯一可靠写法

Bootstrap 5 中，想让 Modal 点击灰色遮罩（backdrop）不关闭，必须用 data-bs-backdrop="static"。别写成 data-backdrop="static"（漏了 bs- 前缀）、也别写成 data-bs-backdrop="false"（这会直接删掉遮罩 DOM 节点，模态框“悬空”且可能因 focus trap 意外关闭）。

这个属性的语义很明确：“static” = 有遮罩、不响应点击；不是布尔开关，也不是禁用指令。

• data-bs-backdrop="true"：默认值，点哪都关
• data-bs-backdrop="false"：遮罩消失，模态框失去视觉隔离，还可能触发滚动穿透或焦点异常
• data-bs-backdrop="static"：遮罩保留，点击无效——这才是你要的效果

必须同步禁用 ESC 键：data-bs-keyboard="false"

只设 data-bs-backdrop="static" 不够。用户仍可用键盘按 ESC 关闭模态框，这在表单提交中途、确认弹窗等场景下是严重干扰。

所以 HTML 属性里要配对出现：

<div class="modal fade" id="confirmModal" data-bs-backdrop="static" data-bs-keyboard="false">

JS 初始化时同理：

const myModal = new bootstrap.Modal(document.getElementById('confirmModal'), {<br>  backdrop: 'static',<br>  keyboard: false<br>});

漏掉 keyboard: false 或写成 keyboard: 'false'（字符串）都会失效。

为什么 jQuery 写法 $('#modal').modal({ backdrop: 'static' }) 有时不生效

常见原因是 DOM 初始化时机不对：如果 JS 在 modal 元素还没被解析进 DOM 时就执行初始化，Bootstrap 会静默失败，回退到默认行为。

更稳妥的做法是确保元素存在后再调用：

• 把脚本放在 </body> 前
• 或包装在 DOMContentLoaded 事件里
• 或用 document.getElementById('modal') 显式查证元素是否存在，避免 null 导致静默忽略配置

另外注意：Bootstrap 5 已移除 jQuery 依赖，$('#modal').modal(...) 是旧版写法，若项目未引入 Bootstrap 的 jQuery 插件包，该调用会报 modal is not a function。

container: 'body' 对 Modal 没影响，别和 Popover 混淆

有人看到 Popover 文档里强调 container: 'body' 就顺手加到 Modal 配置里，这是没必要的。Modal 默认就挂载在 body 下，不存在定位错位或 closest() 失效的问题。

真正容易被忽略的是：如果你用 JavaScript 动态创建 Modal DOM（比如从模板拼接），务必确保 data-bs-backdrop 和 data-bs-keyboard 属性在插入 DOM 后、初始化前就已存在——Bootstrap 初始化时只读取当前属性，不会监听后续变更。