Esc键默认关闭最新打开的layer弹窗,需确保esc: true(默认),iframe内需内部监听并调用parent.layer.close,多层仅关最上层,慎用layer.closeAll()。
Esc 键默认就能关 layer 弹窗,但得看你怎么开的
layer 本身对 esc 键有原生支持——只要没显式禁用,按下 esc 就会关闭**最新打开的那个弹层**。关键在配置项:esc: true(默认值),它控制的就是这个行为。
常见错误现象:按 Esc 没反应。大概率是你或团队某处写了 esc: false,或者用了 closeBtn: 0 后误以为“关按钮=关所有退出方式”,其实二者完全无关。
-
esc: false才真正禁用 Esc 关闭,不是closeBtn的锅 - 如果弹窗是 iframe 类型(
type: 2),且焦点在 iframe 内部,主页面的keydown监听可能收不到事件——这是浏览器安全限制,不是 Layer 的 bug - 多层嵌套时,
esc只关最上层,不会连带关闭父层,除非你手动调用parent.layer.closeAll()
全局监听 Esc 并强制关闭所有层?小心副作用
有人喜欢在 $(document).keydown 或 window.onkeyup 里写 layer.closeAll(),看似一劳永逸,实则容易出问题。
典型场景:你在弹窗里开了一个表单,用户正用键盘输入内容,突然按了 Esc——结果整个弹窗连带未保存的数据一起消失了。
-
layer.closeAll()是“疯狂模式”,不区分类型、不确认状态,直接清空当前页所有 layer 实例 - 若页面同时存在
tips、loading、dialog等多种层,它们全会被干掉,比如一个正在加载的提示框突然消失,用户会困惑 - 更稳妥的做法是只关当前层:
layer.close(layer.index),它取的是最近一次layer.open()返回的索引,精准且轻量
iframe 弹窗里按 Esc 不生效?焦点不在主文档
当 type: 2 的弹窗加载外部页面时,键盘事件默认发生在 iframe 内容文档中,主页面的 keydown 监听器根本收不到。
这不是 Layer 的缺陷,而是浏览器同源策略和事件捕获机制决定的。解决方案必须从 iframe 内部出发。
- 如果 iframe 页面可控,直接在其中加:
document.addEventListener('keydown', e => e.key === 'Escape' && parent.layer.close(parent.layer.getframeindex(window.name))) - 如果不可控(如跨域页面),无法注入脚本,则只能放弃 Esc 支持,改用显式按钮或自定义快捷键组合(如 Ctrl+Q)
- 别试图用
contentWindow主动向 iframe 发送消息——跨域下会报Permission denied
想让 Enter 也触发确认?别动 layer.confirm 原逻辑
layer.confirm 本身不响应 Enter,但你可以封装一层,而不是覆盖或 patch 它的源码。
实际开发中,用户习惯按 Enter 提交,尤其在表单类 confirm 场景下,硬要求点鼠标反而降低体验。
- 封装函数时,用
success回调绑定keydown,只监听目标弹层 DOM,避免污染全局 - Enter 触发
yes回调后,记得立刻layer.close(index),否则弹窗残留 - Esc 触发
cancel后同样要 close,否则二次按 Esc 会再执行一遍 cancel,可能造成重复逻辑
复杂点在于:每个弹层生命周期独立,事件监听必须随层创建而绑定、随层关闭而销毁;漏掉解绑,就可能引发内存泄漏或多次触发回调——这点很容易被忽略。











