jquery 确认对话框插件

基础概念

jQuery 确认对话框插件是一种基于 jQuery 的扩展，用于在网页中显示确认对话框。这种对话框通常用于在执行某些操作之前获取用户的确认，以防止误操作。

类型

模态对话框：阻止用户与页面其他部分交互，直到对话框关闭。
非模态对话框：允许用户在对话框打开时与页面其他部分交互。

应用场景

表单提交前的确认。
删除操作前的确认。
重要设置更改前的确认。

示例代码

以下是一个使用 jQuery 和一个流行的确认对话框插件（如 jquery-confirm）的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Confirm Dialog Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.js"></script>
</head>
<body>
    <button id="delete-btn">Delete Item</button>

    <script>
        $(document).ready(function() {
            $('#delete-btn').click(function() {
                $.confirm({
                    title: 'Confirm!',
                    content: 'Are you sure you want to delete this item?',
                    buttons: {
                        confirm: {
                            text: 'Yes',
                            action: function () {
                                alert('Deleted!');
                            }
                        },
                        cancel: {
                            text: 'No',
                            action: function () {
                                alert('Cancelled!');
                            }
                        }
                    }
                });
            });
        });
    </script>
</body>
</html>