Layui弹窗支持三种Esc关闭方式:全局监听用layer.closeAll()但慎用;单个弹窗在success中绑定并解绑keydown事件更精准;最简方式是直接配置esc: true,仅作用于当前弹层且兼容无遮罩场景。

用户在使用Layui弹窗时,希望按一次Esc键就能立即关闭当前弹层,避免伸手去点右上角×或遮罩层——这种操作在表单频繁提交、快速确认场景中能显著减少操作中断。
全局监听Esc一键关闭所有弹窗
在页面加载完成后,绑定 document 级别的 keydown 事件,检测 Esc 键(keyCode 27)并调用 layer.closeAll():
$(document).ready(function() {
$(document).keydown(function(e) {
if (e.which === 27) {
layer.closeAll();
}
});
});
这行代码会拦截整个页面的 Esc 按键,不管当前焦点在哪、有几个弹窗叠着,一按就全关。但要注意:【它不区分弹窗类型,连正在编辑的 iframe 表单页也会被强制关闭】,生产环境慎用。
为单个弹窗精准绑定Esc关闭逻辑
推荐在 layer.open 的 success 回调中绑定事件,确保只影响当前弹层,且能随弹层销毁自动解绑:
layer.open({
content: '请输入内容',
success: function(layero, index) {
var escHandler = function(e) {
if (e.key === 'Escape') {
layer.close(index);
}
};
$(document).on('keydown', escHandler);
// 记录 handler,供 end 阶段解绑
layero.data('escHandler', escHandler);
},
end: function() {
var handler = $('.layui-layer').last().data('escHandler');
if (handler) {
$(document).off('keydown', handler);
}
}
});
e.key === 'Escape' 比 e.keyCode === 27 更可靠,尤其在 iOS Safari 和部分安卓 WebView 中,keyCode 可能返回异常值。这一步必须写在 success 里,否则 layero 还没渲染完成,.data() 存储会失败。
使用 layer 内置 esc 配置(最简方式)
方法一:直接启用内置 esc 支持
layer.open({
content: '提示内容',
esc: true
});
方法二:对 confirm/alert/msg 等快捷方法同样生效
layer.confirm('确定删除?', { esc: true });
layer.alert('操作成功', { esc: true });
layer.msg('请稍候', { esc: true, time: 0 });
注意:【esc: true 仅对当前弹窗生效,且不会影响其他已打开的弹层】。如果弹窗设置了 shade: false 或 shade: 0,Esc 仍可关闭——因为 esc 控制的是键盘行为,和遮罩是否存在无关。


















