jquery 确认框

jQuery 确认框的实现方法

jQuery 可以通过多种方式实现确认框功能，以下是几种常见的实现方法：

使用原生 JavaScript 的 confirm 方法

if (confirm('确定要执行此操作吗？')) {
    // 用户点击了“确定”
    console.log('操作已确认');
} else {
    // 用户点击了“取消”
    console.log('操作已取消');
}

使用 jQuery UI 对话框

需要引入 jQuery UI 库，并创建一个自定义的确认对话框：

$('#confirm-dialog').dialog({
    autoOpen: false,
    modal: true,
    buttons: {
        "确定": function() {
            $(this).dialog("close");
            console.log('操作已确认');
        },
        "取消": function() {
            $(this).dialog("close");
            console.log('操作已取消');
        }
    }
});

// 触发对话框
$('#confirm-button').click(function() {
    $('#confirm-dialog').dialog('open');
});

使用第三方插件（如 SweetAlert）

SweetAlert 提供了更美观的确认框：

Swal.fire({
    title: '确认操作',
    text: '确定要执行此操作吗？',
    icon: 'warning',
    showCancelButton: true,
    confirmButtonText: '确定',
    cancelButtonText: '取消'
}).then((result) => {
    if (result.isConfirmed) {
        console.log('操作已确认');
    } else {
        console.log('操作已取消');
    }
});

注意事项

• 原生 confirm 方法会阻塞代码执行，直到用户做出选择。
• jQuery UI 对话框和 SweetAlert 提供了更灵活的定制选项，但需要额外引入库文件。
• 确保在 DOM 加载完成后初始化对话框或绑定事件。