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