jQuery 使用 jQuery 创建 Yes 或 No 的确认框

在本文中，我们将介绍如何使用 jQuery 来创建一个 Yes 或 No 的确认框。确认框常用于向用户确认操作，例如删除数据或执行敏感操作之前的验证。通过使用 jQuery，我们可以轻松地创建一个弹出框，并根据用户的选择来执行相应的操作。

创建确认框

要创建一个确认框，我们可以使用 jQuery 的 confirm 函数。该函数会在浏览器中弹出一个带有 Yes 和 No 按钮的对话框，并返回用户的选择结果。如果用户点击了 Yes 按钮，则函数返回 true，如果点击了 No 按钮或关闭了对话框，则返回 false。

下面是一个简单的示例，展示了如何使用 confirm 函数来创建一个确认框：

$("#delete-button").click(function() {
    if (confirm("确定要删除这条数据吗？")) {
        // 用户点击了 Yes 按钮，执行删除操作
        deleteData();
    } else {
        // 用户点击了 No 按钮或关闭了对话框，取消删除操作
        cancelDelete();
    }
});

在这个示例中，我们给一个按钮绑定了点击事件，当用户点击按钮时，会弹出一个对话框询问用户是否要删除数据。如果用户点击了 Yes 按钮，则会执行 deleteData 函数，否则将执行 cancelDelete 函数。

自定义确认框样式

虽然浏览器的默认确认框很实用，但是它们的样式可能无法与我们的网站或应用程序完全匹配。要自定义确认框的样式，我们可以使用 jQuery UI 或其他 CSS 框架来美化它。

下面是一个使用 jQuery UI 来自定义样式的示例：

首先，我们需要在页面中引入 jQuery 和 jQuery UI 的库文件：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>

然后，我们可以使用 jQuery UI 的 dialog 函数来创建确认框，并设置相关样式。以下是一个示例：

$("#delete-button").click(function() {
    $("<div>确定要删除这条数据吗？</div>").dialog({
        title: "确认删除",
        resizable: false,
        modal: true,
        buttons: {
            "Yes": function() {
                // 用户点击了 Yes 按钮，执行删除操作
                deleteData();
                $(this).dialog("close");
            },
            "No": function() {
                // 用户点击了 No 按钮，取消删除操作
                cancelDelete();
                $(this).dialog("close");
            }
        }
    });
});

在这个示例中，我们创建了一个对话框，并设置了标题、是否可调整大小、是否模态等属性。同时，我们也定义了两个按钮，分别对应 Yes 和 No 选项。当用户点击按钮时，会执行相应的回调函数，并关闭对话框。