div中的SweetAlert2

基础概念

SweetAlert2 是一个基于 JavaScript 的弹窗库，用于创建美观、响应式的弹窗。它可以替代浏览器原生的 alert、confirm 和 prompt 对话框，提供更多的自定义选项和更好的用户体验。

类型

SweetAlert2 提供了多种类型的弹窗，包括但不限于：

普通提示（swal）
成功提示（swal.fire({ icon: 'success' })）
错误提示（swal.fire({ icon: 'error' })）
警告提示（swal.fire({ icon: 'warning' })）
信息提示（swal.fire({ icon: 'info' })）
确认对话框（swal.fire({ icon: 'question', confirmButtonText: '确定' })）

应用场景

SweetAlert2 可以应用于各种需要弹窗的场景，例如：

表单验证
用户确认操作
显示通知信息
密码重置提示

示例代码

以下是一个简单的示例，展示如何在 HTML 中使用 SweetAlert2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SweetAlert2 Example</title>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
</head>
<body>
    <div>
        <button onclick="showAlert()">Show Alert</button>
    </div>

    <script>
        function showAlert() {
            Swal.fire({
                title: 'Hello World!',
                text: 'This is a simple alert.',
                icon: 'info',
                confirmButtonText: 'OK'
            });
        }
    </script>
</body>
</html>