本文介绍如何在 layer.js 中利用 yes 回调函数,在点击确定按钮时先执行自定义业务逻辑,随后调用 layer.close 自动销毁对话框。通过封装查询失败提示示例,展示如何在保持弹窗交互的同时完成数据重置与焦点控制,实现业务处理与界面清理的无缝衔接。
layer.js 对话框默认行为与回调需求
layer.js 的弹出层组件内置了基础的销毁按钮功能,具体表现如示意图所示。

若用户点击确定按钮且未定义相应的回调函数,layer 会默认执行对话框关闭操作。然而在实际业务场景中,往往需要在关闭前执行特定的后台处理或数据清理工作。此时,我们需要在确定按钮的点击事件中显式调用销毁逻辑,以确保对话框在业务逻辑执行完毕后自动消失。
具体实现代码如下。
自定义回调与自动关闭实现示例
//查询失败提示
failSearch:function (messager) {
layer.open({
content:messager,
icon:2,
title:'查询失败',
yes:function (index) {//弹出框的索引
layer.close(index);//关闭当前对话框
$(".cls").val("");
$("#jctmh").focus();
},
})
},
通过上述方式,即可在弹窗关闭前完成自定义的业务处理,同时保证对话框按预期关闭,达到既执行逻辑又清理界面的效果。
以上关于 layer.js 回调销毁对话框的示例分享完毕,供读者参考。