layui layer.tips 默认点击空白不关闭,需手动监听 document click 并判断点击是否在 tips 外部,使用 $('#layui-layer'+index) 获取元素,关闭后及时 off 监听以防重复触发。
layer.tips 点击空白处不关闭的默认行为
layui 的 layer.tips 默认不响应页面点击事件,它只在显式调用 layer.close(index) 或触发 time 自动销毁时才会消失。直接点击空白区域无效,这不是 bug,是设计如此 —— tips 层定位在元素附近,本身不占满遮罩层,也没有绑定 document 级 click 监听。
手动监听 document click 并排除弹层自身
要实现“点空白关闭”,必须自己加监听,但关键在于:不能一点击就关,得先判断点击位置是否在 tips 区域外。否则点到 tips 内部也会误关。
- 用
layer.tips返回的index获取 DOM 元素:var tipDom = layer.getChildFrame('body', index).parent().find('.layui-layer-tips')(不推荐);更稳妥的是用layer.getChildFrame不适用,tips 没 iframe,应改用$('#layui-layer' + index) - 监听
$(document).on('click', function(e) { ... }),在回调里用e.target判断是否在 tips 容器或其子元素内 - 注意:tips 可能有多个,需限定只处理当前激活的、且类型为
tips的层,可用layer.getArea(index)配合layer.type校验
简洁可靠的实现代码(兼容 2.8+)
以下代码适用于单个 tips 场景,放在 layer.tips() 调用之后执行:
var index = layer.tips('内容', '#target', { time: 0 });
$(document).on('click.tipClose', function(e) {
var $tip = $('#layui-layer' + index);
if (!$tip.length || !$tip.is(e.target) && $tip.has(e.target).length === 0) {
layer.close(index);
$(document).off('click.tipClose');
}
});
说明:time: 0 是必须的,否则自动销毁会和手动关闭冲突;$(document).off('click.tipClose') 保证关闭后移除监听,避免重复绑定(尤其在频繁调用 tips 的场景下)。
iframe 弹层或嵌套页面中无法点击关闭?
如果 tips 是从 iframe 子页中调用的,$(document) 监听的是子页 document,而点击发生在父页,自然无效。此时必须把监听逻辑提到父页面,或让子页通过 parent.$ 绑定到父 document:
- 子页中不要直接
$(document).on,改用parent.$(parent.document).on('click.tipClose', ...) - 同时确保父页已加载 jQuery,且子页与父页同源(跨域会报错)
- 更健壮的做法是:父页暴露一个方法如
window.closeTips = function(idx) { layer.close(idx); },子页点击空白时调用parent.closeTips(index)
最易被忽略的是监听未清理 —— 多次打开 tips 却没解绑旧监听,会导致一次点击触发多次 layer.close,甚至关错层。务必每次打开新 tips 前先 $(document).off('click.tipClose')。











