jquery弹出提示框插件

基础概念

jQuery 弹出提示框插件是一种基于 jQuery 库的扩展，用于在网页上显示各种类型的提示信息。这些提示框可以用于用户交互、错误提示、信息确认等场景。

类型

模态对话框（Modal Dialogs）：阻止用户与页面其他部分交互，直到对话框关闭。
通知提示（Tooltips）：当用户将鼠标悬停在某个元素上时显示简短的信息。
警告和确认对话框（Alerts and Confirmations）：用于显示警告信息或获取用户确认。
加载指示器（Loading Indicators）：在数据加载过程中显示提示信息。

应用场景

表单验证错误提示
用户操作确认（如删除文件）
显示系统状态或通知
引导用户完成某些操作

示例代码

以下是一个使用 jQuery 和 jquery-confirm 插件创建模态对话框的示例：

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

    <script>
        $(document).ready(function() {
            $('#myButton').click(function() {
                $.confirm({
                    title: 'Confirm!',
                    content: 'Are you sure you want to proceed?',
                    buttons: {
                        confirm: function () {
                            alert('Confirmed!');
                        },
                        cancel: function () {
                            alert('Cancelled!');
                        }
                    }
                });
            });
        });
    </script>
</body>
</html>