Layui 中实现"确定/取消"弹窗-CFANZ编程社区

在 Layui 中实现"确定/取消"弹窗非常简单，可以使用内置的 layer 模块。以下是详细实现代码：

方法 1：使用 layer.confirm（推荐）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui 确认弹窗</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui@2.9.6/dist/css/layui.min.css">
</head>
<body>
    <button id="btnConfirm" class="layui-btn">打开确认弹窗</button>
    
    <script src="https://cdn.jsdelivr.net/npm/layui@2.9.6/dist/layui.js"></script>
    <script>
        layui.use('layer', function() {
            const layer = layui.layer;
            
            document.getElementById('btnConfirm').onclick = function() {
                layer.confirm('确定要执行此操作吗？', {
                    title: '操作确认',
                    btn: ['确定', '取消'], // 按钮文本
                    icon: 3 // 问号图标
                }, function(index) {
                    // 点击确定回调
                    layer.msg('您点击了确定', {icon: 1});
                    layer.close(index); // 关闭当前弹窗
                    
                    // 这里写确定后的业务逻辑...
                    console.log("执行确认操作");
                }, function(index) {
                    // 点击取消回调
                    layer.msg('操作已取消', {icon: 2});
                    layer.close(index); // 关闭当前弹窗
                });
            };
        });
    </script>
</body>
</html>

方法 2：使用 layer.open（自定义样式）

layer.open({
    title: '操作确认',
    content: '您确定要删除这条数据吗？',
    icon: 3, // 问号图标
    btn: ['确定删除', '取消'],
    yes: function(index) {
        // 确定按钮回调
        layer.msg('数据已删除', {icon: 1});
        layer.close(index);
        
        // 这里写删除逻辑...
    },
    btn2: function(index) {
        // 取消按钮回调
        layer.msg('已取消删除', {icon: 2});
        // 返回false会阻止弹窗关闭（可做表单验证）
        // return false; 
    }
});

关键参数说明：

参数	说明
`title`	弹窗标题（默认：'信息'）
`content`	显示内容（支持HTML）
`icon`	图标类型（0-16，3=问号）
`btn`	按钮文本数组（最多2个按钮）
`yes`	第一个按钮（确定）的回调函数
`btn2`	第二个按钮（取消）的回调函数
`closeBtn`	关闭按钮（0隐藏/1显示）

效果特点：

半透明遮罩层，焦点锁定
自动计算位置和大小
响应式适配移动端
内置动画效果
支持ESC键关闭（可通过escCancel: false禁用）

注意事项：

必须引入 Layui 的 CSS 和 JS 文件
弹窗回调中必须调用 layer.close(index) 关闭弹窗
在表单中使用时，可在btn2回调中返回false阻止弹窗关闭
可通过skin: 'your-class'自定义皮肤样式

完整文档参考：layer.layui.com

通过这两种方式，您可以根据业务需求灵活实现确定/取消弹窗交互，适用于删除确认、操作提示、重要变更确认等场景。