【layui小技巧】layer使用layer.msg方法时如何让用户点击遮罩层就关闭消息框？layer.msg点击消失

本文介绍如何使用Layer组件自定义消息框的关闭方式，通过设置time参数为0禁用自动关闭，并利用jQuery监听遮罩层点击事件实现手动关闭。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

layer是一个非常受欢迎的组件，好多大站都在使用，用它来弹出消息框既美观又方便。不过我最近在使用它的layer.msg方法时发生个问题，这个方法默认是3秒钟就消失，可是我不想让它自动消失，而是在用户点击消息框外的地方才消失，那该怎么办呢？

研究了下它的方法，发现可以通过传入参数time:0来设置不消失。即：

layer.msg("点击其他任意地方可关闭此对话框",{shade: 0.2,time:0});

这样的话确实是不消失了，可是用户无论点击那里它也不消失，这样可不行呀。于是又研究了下，原来这个方法可以返回一个对象，然后这个对象有个close方法。这样子，我们给遮罩层绑定个时间，在用户点击它的时候调用close方法即可。

通过查看遮罩层的元素发现它的class是layui-layer-shade，这样子我们编写下面代码解决：

$(document).on("click",".layui-layer-shade",function(){
	layer.close(myMsg);
});

不得不说layer真是强大，layui的其他组件也很强大，它提供了各种方法，你需要做的是根据需求动脑筋把它们像搭积木一样拼起来。

最后附上完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
	<script src="http://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script>
	<script type="text/javascript" src="js/layer/layer.js"></script>
	<title>测试</title>
</head>
<style></style>
<body>
	
</body>
<script>
var myMsg;
myMsg=layer.msg("点击其他任意地方可关闭此对话框",{shade: 0.2,time:0});
$(document).on("click",".layui-layer-shade",function(){
	layer.close(myMsg);
});
</script>
</html>