Layui多按钮弹窗需配置btn数组并为各按钮定义yes、btn2、btn3等回调函数，每个回调须显式调用layer.close(index)关闭弹窗，否则导致z-index错乱；btn数量须与回调函数严格匹配。
要在Layui中实现一个带多个按钮的弹窗，并让每个按钮触发各自独立的逻辑，不能只依赖默认的yes/confirm回调，必须明确配置btn数组并为每个额外按钮编写对应的btn2、btn3等函数。
基础多按钮弹窗结构
第一步：调用layer.open并传入至少两个按钮文本的数组，例如btn: ['保存', '取消', '重置']。
第二步：为第二个按钮（“取消”）写btn2函数，为第三个按钮（“重置”）写btn3函数；第一个按钮始终由yes函数接管，无需额外命名。
第三步：在每个回调函数内部，必须显式调用layer.close(index)关闭当前弹窗，否则点击后弹窗会残留——【不手动关闭会导致后续弹窗z-index错乱】。
完整可运行代码示例
复制以下代码到已引入Layui的HTML页面中即可直接测试：
layui.use('layer', function(){<br> var layer = layui.layer;<br> layer.open({<br> type: 1,<br> title: '表单操作',<br> content: '<div style="padding:20px;"><p>请输入姓名：</p><input type="text" id="nameInput" class="layui-input"></div>',<br> area: ['400px', '200px'],<br> btn: ['保存', '取消', '重置'],<br> yes: function(index, layero){<br> var name = $('#nameInput').val();<br> if(!name.trim()) { layer.msg('姓名不能为空'); return; }<br> layer.msg('已保存：' + name);<br> layer.close(index);<br> },<br> btn2: function(index, layero){<br> layer.close(index);<br> },<br> btn3: function(index, layero){<br> $('#nameInput').val('');<br> layer.msg('已清空输入框');<br> } <br> });<br>});
关键细节与避坑说明
btn数组长度必须与定义的回调函数数量严格匹配：有3个按钮就必须有yes + btn2 + btn3，缺一个就会导致最后一个按钮无响应。
btn2及之后的函数若返回false，该按钮点击将不会关闭弹窗——这适合需要校验后暂不关闭的场景，但多数情况下应主动调用layer.close(index)。
如果按钮超过3个，继续按btn4、btn5顺序命名，函数签名保持一致：function(index, layero)。
