Modal 反复弹出的根源是 modal(‘show’) 无状态校验，解决需按钮点击后 disabled、监听 hidden.bs.modal 恢复状态，并用 $(‘#myModal’).is(‘:visible’) 或 data(‘bs.modal’)?.isShown 判断是否已打开。
点击按钮后 Modal 反复弹出，根本停不下来
这是 bootstrap modal 最常见的交互 bug：用户手快连点，$('#mymodal').modal('show') 被反复调用，结果页面上叠了三四个模态框，背景灰层越来越深，esc 关不掉，点击遮罩也只关最上面一个。
原因很简单：Bootstrap 的 modal('show') 不做状态校验，只要调就开——它默认你已自行控制触发逻辑。
解决思路不是“等 Bootstrap 修复”，而是从调用侧掐断重复入口：
- 按钮点击后立刻
disabled，Modal 关闭后再恢复（注意：要监听hidden.bs.modal，不是hide.bs.modal） - 用
data-bs-backdrop="static"+data-bs-keyboard="false"暂时禁用点击 /ESC 关闭，配合手动控制更稳妥 - 检查是否在事件绑定里写了重复的
.on('click', ……)，尤其在 AJAX 回调或动态插入 DOM 后没解绑
Modal 显示前如何判断它当前是不是已经打开了
别查 $('.modal').hasClass('show')——这个类名在动画中可能还没加上，或者刚移除但 DOM 还没清理完。Bootstrap 提供了更可靠的 API：
- 用
$('#myModal').is(':visible')判断 DOM 是否可见（兼容性好，适用于 Bootstrap 4/5） - 更精确的做法是读取 Bootstrap 的实例状态：
$('#myModal').data('bs.modal')?.isShown === true（Bootstrap 5.1+） - 避免用
document.querySelector('.modal.show')，因为多个 Modal 共存时会误判
示例逻辑：
$('#openBtn').on('click', function() {if ($('#myModal').data('bs.modal')?.isShown) return; $('#myModal').modal('show'); });使用 data-bs-toggle=”modal” 时怎么加防抖
原生 data-bs-toggle="modal" 写法看着干净，但完全绕过了 JS 控制权，没法插手防重逻辑。想保留声明式写法又防连点，有两个务实办法：
- 给按钮加
data-bs-dismiss="modal"并设为disabled，首次点击时用 JS 手动触发并立即disabled，后续点击自然无效 - 放弃
data-bs-toggle，统一收口到 JS 事件里——哪怕只是套一层$('#openBtn').modal('show')，也能加状态判断和节流 - 如果必须用 data 属性，可配合
data-bs-target+ 自定义 click 处理器，把event.preventDefault()和状态检查都塞进去
关闭 Modal 后按钮没恢复，或者状态错乱
常见于异步操作（比如表单提交）后手动调用 modal('hide')，但忘记在 hidden.bs.modal 回调里恢复按钮状态，导致用户以为功能卡死。
关键点：
-
hide.bs.modal是「开始隐藏动画时」触发，此时 Modal 还可见；hidden.bs.modal才是「完全隐藏后」，所有清理工作放这里 - 如果 Modal 是通过
data-bs-dismiss="modal"关闭的，同样会触发这两个事件，不用额外处理 - 多个 Modal 共存时，确保事件监听器绑定在具体目标上（如
$('#myModal').on('hidden.bs.modal', ……)），而不是全局委托
容易被忽略的是：Modal 实例销毁后，data('bs.modal') 会变 undefined，再次调用 modal('show') 会重建实例，但之前的事件监听不会自动重装——所以状态检查别依赖实例是否存在，优先用 :visible 或 CSS 类。
