Bootstrap模态框中按Esc键为何不能自动关闭？

本文共计736个文字，预计阅读时间需要3分钟。

相关专题

esc 键不关闭 bootstrap modal，不是 bug，是配置没生效或配置冲突。关键在 keyboard 和 backdrop 必须协同设置，且模态框元素必须有 tabindex。

为什么加了 keyboard: false 还能按 Esc 关闭？

常见原因是 HTML 中的 data-bs-backdrop 或 JS 初始化时的 backdrop 没同步设为 'static'。Bootstrap 5 的行为逻辑是：只要背景可点击（backdrop: true），哪怕 keyboard: false，用户点一下遮罩层就关了——这时你误以为“Esc 没禁掉”，其实是遮罩层抢在 ESC 前响应了关闭动作。

• keyboard: false 只管键盘，不管鼠标
• backdrop: 'static' 才禁用背景点击，二者缺一不可
• 如果用 HTML 属性控制，必须同时写 data-bs-backdrop="static" 和 data-bs-keyboard="false"；混用 HTML 属性和 JS 初始化容易覆盖，推荐只用 JS 初始化

tabindex="-1" 是 ESC 生效的前提

Bootstrap 5 要求模态框根元素（即 <div class="modal">）必须带 tabindex="-1"，否则 keyboard 配置根本不会被监听——这也是为什么很多人写了 keyboard: false 却发现 Esc 还是能关、或者干脆完全没反应。

• 不加 tabindex：ESC 键事件压根不会冒泡到 modal 实例，配置无效
• 加了 tabindex="-1" 后，keyboard: true/false 才真正起作用
• 标准结构中它本该存在，但手写 HTML 或动态插入时容易遗漏

如何安全地禁用 Esc + 点击关闭

最稳妥的做法是统一用 JS 初始化，并显式控制状态，避免属性与脚本打架：

const myModalEl = document.getElementById('myModal'); const myModal = new bootstrap.Modal(myModalEl, { backdrop: 'static', keyboard: false }); // 确保 DOM 已就绪且 tabindex 存在 if (!myModalEl.hasAttribute('tabindex')) { myModalEl.setAttribute('tabindex', '-1'); }

• 不要依赖 data-bs-* 属性自动初始化，尤其在 AJAX 加载或组件复用场景下
• 若需手动触发，用 myModal.show()，而非 $().modal('show')（避免 jQuery 插件残留）
• 连续点击防重：调用 show() 前检查 myModal._isShown === true 或 myModalEl.classList.contains('show')

最容易被忽略的是 tabindex 缺失和 backdrop/keyboard 不成对设置。这两个点漏一个，ESC 就可能“时灵时不灵”，调试时建议直接查元素是否同时满足：有 tabindex="-1"、data-bs-backdrop="static"、data-bs-keyboard="false"，再看 JS 初始化是否覆盖了它们。