必须同时设置 data-bs-backdrop="static" 和 data-bs-keyboard="false" 才能真正禁用模态框关闭：前者保留遮罩但禁用点击，后者阻止 Esc 键触发关闭；缺一不可，且需避免嵌套、重复 backdrop 及混用声明式与 JS 控制。
data-bs-backdrop="static" 是唯一正确写法
想让 Bootstrap 5 Modal 点击背景不关闭，必须用 data-bs-backdrop="static"，不是 false，也不是漏掉 bs- 前缀的 data-backdrop="static"。后者完全无效，模态框会按默认行为（点击即关）运行。
这个值语义明确：保留 .modal-backdrop DOM 节点和视觉遮罩，但禁用其点击事件监听。而 data-bs-backdrop="false" 会直接移除整个遮罩层，导致模态框“悬空”，容易引发焦点丢失、滚动穿透、屏幕阅读器误读等问题。
常见错误包括：
- 写了
data-backdrop="static"（缺bs-）→ 浏览器忽略该属性，降级为true - 只设
data-bs-backdrop="static"，但没关键盘 → 用户仍可用 Esc 关闭 - 在 React/Vue 中动态挂载 Modal 后再补 HTML 属性 → 属性不生效，需 JS 初始化时同步传参
必须配对禁用 keyboard 才算真正锁死
data-bs-keyboard="false" 不是可选项，而是必要项。单独设 data-bs-backdrop="static" 只挡住鼠标，Esc 键依然能触发 hide，尤其在表单未提交完成时非常危险。
JS 初始化时更可靠，例如：
const myModal = new bootstrap.Modal(document.getElementById('myModal'), {
backdrop: 'static',
keyboard: false
});
注意两点：
- HTML 属性和 JS 参数必须一致，不能一个写
static，一个写true - 如果 Modal 是用
data-bs-toggle="modal"触发的，它不会读取 JS 实例参数，所以得统一用 JS 控制显示逻辑 - 别在
shown.bs.modal里调.modal('handleUpdate')—— 这个方法不重置 backdrop 行为，纯属冗余
多个 Modal 嵌套时 backdrop 会互相覆盖
Bootstrap 官方明确不支持嵌套 Modal。如果你在一个 data-bs-backdrop="static" 的 Modal 里再打开另一个 Modal，第二个 Modal 的 .modal-backdrop 会覆盖第一个，但点击区域判定混乱：点第一层背景，可能关闭第二层，也可能无响应，甚至触发 focus trap 导致键盘卡死。
真实业务中遇到这类需求，优先考虑替代方案：
- 把子内容收进 Tab 或 Accordion，避免弹窗套弹窗
- 用单个 Modal + 动态内容替换（
innerHTML或框架的条件渲染） - 若必须多层，手动移除前一个 Modal 的 backdrop：
document.querySelectorAll('.modal-backdrop').forEach(el => el.remove())，但要注意 z-index 和焦点管理
遮罩层重复叠加会导致颜色加深
多次点击按钮打开同一个 Modal，又只用 .modal('hide') 隐藏，不销毁或清理 backdrop，就会残留多个 .modal-backdrop 元素。它们堆叠后 opacity 叠加，视觉上遮罩变深，甚至影响点击穿透判断。
根本原因不是 CSS 写错了，而是生命周期没管好。解决方式很直接：
- 改用
.modal('show')/.modal('hide')成对调用，确保每次 show 前先 hide（避免重复实例） - 隐藏后手动清 backdrop：
document.querySelectorAll('.modal-backdrop').forEach(el => el.remove()) - 避免混用
data-bs-toggle="modal"和手写 JS 显示逻辑——二者初始化机制不同，容易造成 backdrop 状态错位
最稳妥的做法是放弃声明式触发，全部收口到 JS 事件里，加状态判断和节流，比如检查 myModal.getInstance()?.isShown 再决定是否 show。
