.modal-backdrop残留和body上modal-open类未清除，是因DOM状态未同步导致的视觉锁死；根本原因是多层Modal或异常关闭时，Bootstrap对backdrop清理和modal-open判断失准，须在hidden.bs.modal中按需清理。
因为模态框关闭时，.modal-backdrop 元素没被正确移除，或 body 上的 modal-open 类残留 —— 这不是 Bug，是 DOM 状态没同步导致的视觉锁死。
为什么 .modal-backdrop 会残留
Bootstrap 每次调用 .modal('show') 都会插入一个新的 <div class="modal-backdrop">；但关闭时只清理“当前实例”关联的 backdrop，多层 Modal 或快速开关容易让旧 backdrop 漏掉。尤其在以下场景：
<ul>
<li>用 <code>$('#m2').modal().hide()（错误写法）代替 $('#m2').modal('hide') —— 后者触发完整生命周期，前者只执行 DOM 隐藏，不清理 backdrop
location.href = 'xxx'），backdrop 被留在 DOM 中为什么 body 一直有 modal-open
modal-open 是 Bootstrap 控制页面滚动的关键 class：它给 body 加 overflow: hidden。这个 class 的增删依赖于「当前是否有 .modal.show」的判断 —— 但在多层 Modal 或异常关闭时，这个判断会失准。
常见诱因包括：
- 手动调用
$('.modal').removeClass('show')而非.modal('hide')，导致 Bootstrap 无法感知状态变更 - Modal 实例被 JS 动态销毁（如 Vue/React 组件卸载），但 backdrop 和 class 没被一并清理
- 监听了
hidden.bs.modal却没检查是否还有其他 Modal 在显示，直接$('body').removeClass('modal-open')
怎么安全清理残留 backdrop 和 class
别全局删 $('.modal-backdrop').remove() —— 它可能误杀其他还在用的 Modal 遮罩。稳妥做法是按需清理：
- 在最外层 Modal 的
hidden.bs.modal事件里统一收尾：$('#outerModal').on('hidden.bs.modal', function () { if ($('.modal.show').length === 0) { $('body').removeClass('modal-open'); $('.modal-backdrop').remove(); } }); - 如果 Modal 是动态创建（比如 AJAX 加载内容后
.modal('show')），确保每次 show 前先$('.modal-backdrop').remove()，再初始化新实例 - 禁用 backdrop 的 Modal（
data-bs-backdrop="false"）必须同步设data-bs-keyboard="false"，否则按 Esc 仍会触发隐藏逻辑，留下状态断层
最容易被忽略的一点
所有清理操作必须发生在 hidden.bs.modal（而非 hide.bs.modal）回调中 —— 因为前者保证 Modal 已从 DOM 移除或隐藏完毕，后者只是关闭流程刚开始，此时 backdrop 可能还没生成或正在动画，强行操作会失败或重复。
