jquery 弹出框确认后执行

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。jQuery 弹出框通常用于向用户显示信息，并获取用户的确认或取消操作。

类型

jQuery 弹出框主要有以下几种类型：

alert：显示一个警告框，包含一条消息和一个确定按钮。
confirm：显示一个确认框，包含一条消息和确认及取消按钮。
prompt：显示一个提示框，包含一条消息、一个输入框和确认及取消按钮。

应用场景

弹出框常用于以下场景：

确认用户操作，如删除数据前确认。
提示用户信息，如操作成功或失败的通知。
获取用户输入，如设置密码时确认密码。

示例代码

以下是一个使用 jQuery 的 confirm 弹出框并在用户确认后执行操作的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Confirm Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<button id="deleteBtn">Delete Item</button>

<script>
$(document).ready(function() {
    $('#deleteBtn').click(function() {
        if (confirm("Are you sure you want to delete this item?")) {
            // 用户点击确认后的操作
            alert("Item deleted!");
            // 这里可以添加删除数据的代码
        } else {
            // 用户点击取消后的操作
            alert("Delete cancelled.");
        }
    });
});
</script>

</body>
</html>

遇到的问题及解决方法

问题：弹出框不显示或样式不正确。

原因：

jQuery 库未正确加载。
弹出框代码在 DOM 元素加载完成前执行。

解决方法：

确保 jQuery 库已正确引入。
将弹出框代码放在 $(document).ready() 函数中，确保 DOM 元素加载完成后再执行。

$(document).ready(function() {
    // 弹出框代码
});

问题：弹出框样式与页面风格不一致。

解决方法：

使用自定义的 CSS 样式来覆盖默认的弹出框样式。
使用第三方库（如 SweetAlert2）来实现更美观的弹出框。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Custom Confirm Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <style>
        .swal2-popup {
            font-size: 1.6rem;
        }
    </style>
</head>
<body>

<button id="deleteBtn">Delete Item</button>

<script>
$(document).ready(function() {
    $('#deleteBtn').click(function() {
        Swal.fire({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            if (result.isConfirmed) {
                // 用户点击确认后的操作
                alert("Item deleted!");
                // 这里可以添加删除数据的代码
            } else if (result.isDismissed) {
                // 用户点击取消后的操作
                alert("Delete cancelled.");
            }
        });
    });
});
</script>

</body>
</html>

通过以上示例和解决方法，您可以更好地理解和应用 jQuery 弹出框。