Bootstrap模态框背景点击不关闭的设定

data-backdrop="static"是禁用模态框点击背景关闭的关键配置，需配合keyboard: false禁用Esc键，并注意实例生命周期管理与iOS兼容性处理。

data-backdrop="static" 是关键配置

Bootstrap 模态框默认点击背景（backdrop）会关闭，要禁用这个行为，必须在触发模态框的 HTML 元素或 JS 初始化时显式设置 backdrop 为 "static"。不是 false，也不是 "false"，写错就无效。

常见错误是把 data-backdrop="false" 当作关闭 backdrop 的方式——这其实会让 backdrop 完全消失，但点击空白处仍会关闭（因为 backdrop 被移除了，事件委托逻辑变了），反而达不到“点背景不关”的效果。

• data-backdrop="static"：保留灰色遮罩层，点击它不关闭模态框，按 Esc 也不关（除非额外设 keyboard: false）
• data-backdrop="true"（默认）：点击即关闭
• data-backdrop="false"：遮罩层消失，但模态框仍可被点击关闭（因 document 点击事件未被拦截）

JS 初始化时传 backdrop: "static"

如果用 JS 控制模态框（比如 new bootstrap.Modal()），必须在配置对象里明确传入 backdrop: "static"。DOM 上的 data- 属性在此场景下不会自动生效。

const myModal = new bootstrap.Modal(document.getElementById('myModal'), {  backdrop: 'static',  keyboard: false  // 连 Esc 也禁用，常和 static 一起用});

注意：keyboard 默认为 true，即使设了 backdrop: "static"，Esc 仍能关闭。需要一并关掉。

避免多次初始化导致配置失效

如果页面中反复调用 modal('show') 或重复执行 new bootstrap.Modal()，旧实例可能残留，新配置不生效。尤其在 AJAX 加载内容后重新绑定模态框时容易出问题。

• 每次 show 前先检查是否已有实例：bootstrap.Modal.getInstance(el)
• 销毁旧实例再新建：myModal.dispose(); new bootstrap.Modal(...)
• 更稳妥的做法：只初始化一次，在 data-bs-* 属性里写死配置，用 data-bs-backdrop="static" 触发

移动端点击穿透问题（iOS Safari 特别明显）

设了 backdrop: "static" 后，在 iOS Safari 上偶尔出现点击背景后模态框关闭，或背景区域响应迟钝。这不是配置错误，而是 iOS 对 pointer-events: none 和 touch-action 的处理差异。

临时缓解方式是在模态框显示后强制给 .modal-backdrop 加样式：

.modal-backdrop.show {  pointer-events: auto;  touch-action: manipulation;}

如果不加，某些低版本 iOS 可能将点击事件透传到下层元素，造成误关闭或跳转。

真正可靠的交互边界，还是得靠 backdrop: "static" + keyboard: false + 实例生命周期管理。配置本身简单，难的是上下文里不被覆盖、不被绕过。