data-keyboard="false" 不生效的首要原因是 modal 元素缺少 tabindex 属性;必须同时设置 tabindex(如 tabindex="-1")、data-backdrop="static" 和 keyboard: false,并确保提供显式关闭入口。
data-keyboard="false" 不生效?先检查 tabindex
bootstrap modal 的 data-keyboard="false" 看似直接,但实测按 esc 仍能关闭——最常见原因是 div.modal 缺少 tabindex 属性。bootstrap 内部依赖该属性判断模态框是否可聚焦,没它,keyboard 配置压根不触发。
-
tabindex值可以是任意整数(如tabindex="-1"最常用),只要存在即可 - 仅设
data-keyboard="false"而不加tabindex,等于白配 - Vue/React 动态渲染时,容易漏掉这个属性,建议在模板中硬编码写死
JS 初始化时禁用 ESC:backdrop 和 keyboard 要一起关
单靠 JS 调用 .modal({ keyboard: false }) 不够稳妥——如果 HTML 中没声明 data-backdrop="static",点击背景仍会关闭,用户可能误以为“ESC 没禁掉”,其实是被背景点击抢了关闭时机。
- 必须同时设置:
backdrop: 'static'+keyboard: false - 二者缺一不可:前者防点空白,后者防按 ESC;只关一个,行为就不完整
- 推荐统一用 JS 初始化:
$('#myModal').modal({ backdrop: 'static', keyboard: false });,避免 HTML 和 JS 配置冲突
为什么有时加了属性还是关不掉?注意 Bootstrap 版本差异
Bootstrap 3 和 4/5 对 data-keyboard 的处理逻辑一致,但某些定制版或老旧 CDN 加载的 modal.js 可能 patch 过,导致属性被忽略。另外,如果页面多个模态框共用同一 ID 或重复初始化,也会让配置失效。
- 检查控制台是否有
Modal is already initialized类警告 - 确认引入的是完整版
bootstrap.bundle.min.js(含 Popper 和 Modal 插件) - 避免在 modal 打开后再次调用
.modal('show')覆盖初始配置
禁用 ESC 后,用户怎么关模态框?别忘了显式提供关闭入口
禁用 ESC 和背景点击后,模态框就真“锁死”了——如果忘记在 .modal-header 或 .modal-footer 里放 data-dismiss="modal" 按钮,或者 JS 里没绑定关闭逻辑,用户只能强制刷新页面。
- 务必保留至少一个明确的关闭按钮,例如:
<button type="button" class="close" data-dismiss="modal">×</button> - 若需自定义关闭行为(比如提交前校验),用
$('#myModal').modal('hide')主动调用,而不是依赖默认行为 - 移动端用户无法按 ESC,禁用后更得确保触摸关闭路径畅通











