data-bs-backdrop="static"是唯一可靠写法，必须配合data-bs-keyboard="false"、tabindex="-1"和aria-hidden="true"才能彻底禁用点击背景和esc键关闭，漏bs-前缀或缺失任一属性均会导致失效。
data-bs-backdrop="static" 是唯一生效的写法
Bootstrap 5+ 中，data-bs-backdrop="static" 是禁用点击背景关闭的唯一可靠方式。漏掉 bs- 前缀（比如写成 data-backdrop="static"）会直接失效，模态框退化为默认行为——点哪都关。写成 data-bs-backdrop="false" 更危险：它会彻底删掉 .modal-backdrop 元素，导致模态框“悬空”，引发滚动穿透、焦点丢失，甚至屏幕阅读器误读。
这个值不是布尔开关，而是语义声明：“static” = 遮罩层存在，但不响应点击事件。你必须把它写在 modal 根元素上，例如：
<div class="modal fade" id="myModal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static">
<ul>
<li>
<code>data-bs-backdrop="true"</code>（默认）：点击遮罩或空白处都会关闭</li>
<li>
<code>data-bs-backdrop="false"</code>：遮罩层 DOM 节点被移除，视觉和逻辑都失控</li>
<li>
<code>data-bs-backdrop="static"</code>：遮罩还在，点击无效——这才是你要的效果</li>
</ul>
<h3>必须同步设置 data-bs-keyboard="false"</h3>
<p>只加 <code>data-bs-backdrop="static"</code> 不够。用户仍可用 ESC 键关闭模态框，尤其在表单填写中途、二次确认等关键路径下，这是严重逻辑漏洞。</p>
<p><code>data-bs-keyboard="false"</code> 和 <code>data-bs-backdrop="static"</code> 是硬性配对项，二者独立控制不同关闭通路：前者管鼠标，后者管键盘。缺一不可。</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap"><img
src="https://img.php.cn/upload/skill/000/000/081/179025304626966.jpg" alt="VPS Bootstrap" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap" class="overflowclass">VPS Bootstrap</a>
<p class="overflowclass">从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。</p>
</div>
<a rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<ul>
<li>HTML 写法：<code>data-bs-backdrop="static"</code> 和 <code>data-bs-keyboard="false"</code> 必须同时出现在 modal 根元素上</li>
<li>JS 初始化写法：<code>new bootstrap.Modal(el, { backdrop: 'static', keyboard: false })</code>，注意值是字符串，不是布尔值</li>
<li>如果用 jQuery：<code>$('#myModal').modal({ backdrop: 'static', keyboard: false })</code>
</li>
</ul>
<h3>tabindex="-1" 和 aria-hidden="true" 缺一不可</h3>
<p><code>data-bs-keyboard="false"</code> 的生效前提是 modal 元素有 <code>tabindex="-1"</code>。没有它，ESC 键监听逻辑根本不会挂载，配置形同虚设。而 <code>aria-hidden="true"</code> 不只是无障碍需求，它参与 Bootstrap 内部状态管理——漏掉会导致初始化异常、多次触发事件，甚至 backdrop 行为错乱。</p>
<ul>
<li>必须写在 modal 根元素上，不能只靠 JS 补充</li>
<li>动态生成 modal（如 AJAX 插入 HTML）时，容易遗漏这两个属性，务必检查生成模板</li>
<li>别写 <code>aria-hidden="false"</code>：这会让屏幕阅读器提前宣布 modal 已打开，但 DOM 还没 ready，造成逻辑错乱</li>
</ul>
<h3>iOS Safari 和嵌套 Modal 的隐藏陷阱</h3>
<p>即使所有属性都写对，在 iOS Safari 上仍可能出现点击背景后模态框意外关闭，或背景区域无响应。这不是配置错误，而是 iOS 对 <code>pointer-events</code> 和 <code>touch-action</code> 的处理差异导致点击事件透传。</p>
<p>临时缓解方案是在模态框显示后强制给 backdrop 加样式：</p>
<pre class="brush:php;toolbar:false;">.modal-backdrop.show { pointer-events: auto; touch-action: manipulation; }
嵌套 Modal 是另一个高危场景：Bootstrap 官方不支持嵌套。在一个已打开的 data-bs-backdrop="static" Modal 里再打开另一个 Modal，第二个 backdrop 会覆盖第一个，但点击区域逻辑混乱——点第一层背景，可能关闭第二层，也可能无反应。React/Vue 封装组件（如 react-bootstrap）未必透传 backdrop 和 keyboard 到原生实例，得查对应文档确认是否支持。
