Bootstrap模态框设置static backdrop后iOS Safari点外部仍关闭如何解决

• 版本属性不匹配：你当前使用的是Bootstrap 5版本（触发按钮使用了带bs前缀的data-bs-toggle、data-bs-target属性），但你添加的模态框属性、JS调用方法都是Bootstrap 3/4的旧版语法，旧版的data-backdrop、data-keyboard属性在Bootstrap 5中不生效，基于jQuery的$().modal()初始化方法也和Bootstrap 5原生API不兼容。
• 冗余样式冲突：模态框标签上额外添加了hide类，Bootstrap 5的模态框默认通过fade类控制显隐逻辑，多余的hide类会导致交互逻辑异常。
• iOS Safari适配问题：iOS Safari的触摸事件冒泡逻辑和桌面端存在差异，部分情况下Bootstrap的默认拦截逻辑无法正常触发，导致点击外部区域依然会关闭模态框。

步骤1：修正模态框HTML代码 #

删掉模态框标签的hide类，将旧版属性替换为Bootstrap 5对应的带bs前缀的属性，修改后的模态框代码如下：

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal" style="position: fixed;">
    Launch modal
</button>

<!-- Modal -->
<div id="myModal" class="modal fade"  tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-body">
        
            <div id="sportHeader">choose sport:</div>

        </div>
    </div>
    </div>
</div>

步骤2：匹配对应版本的JS初始化逻辑（按需选择） #

如果你使用纯Bootstrap 5（无jQuery依赖），使用对应原生API初始化：

const myModalEl = document.getElementById('myModal')
const myModal = new bootstrap.Modal(myModalEl, {
  backdrop: 'static',
  keyboard: false
})
// 需要打开模态框时调用 myModal.show()

如果你使用的是Bootstrap 4及更早的依赖jQuery的版本，需要将触发按钮的属性改为不带bs前缀的版本：

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" style="position: fixed;">
    Launch modal
</button>

再用原有jQuery方法初始化即可。

步骤3：添加iOS Safari兜底拦截逻辑 #

如果修改后依然存在问题，添加以下代码强制拦截模态框外部的点击/触摸事件，彻底禁止点击外部关闭：

const modalEl = document.getElementById('myModal')
// 拦截普通点击事件
modalEl.addEventListener('click', e => {
  if (e.target === modalEl) {
    e.stopPropagation()
    e.preventDefault()
  }
})
// 兼容iOS Safari触摸事件
modalEl.addEventListener('touchstart', e => {
  if (e.target === modalEl) {
    e.stopPropagation()
    e.preventDefault()
  }
})

内容的提问来源于stack exchange，提问作者Torpid