基于jQuery的弹出警告对话框美化插件(警告，确认和提示)

基于jQuery的弹出警告对话框美化插件攻略

介绍

在网站开发中，经常需要弹出警告、确认和提示对话框等弹出窗口。而jQuery插件可以方便地实现这些需求，并且可以通过美化插件使对话框更具有美观性和易用性。本攻略将介绍基于jQuery的弹出警告对话框美化插件的使用方法及应用。

jQuery插件：sweetalert2

sweetalert2是一个基于jQuery的弹出警告对话框美化插件，具有简单易用、美观、支持自定义样式等特点。使用sweetalert2可以轻松地在网页中弹出警告、确认、提示、输入等类型的对话框。

安装

可以通过CDN或者下载文件的方式进行安装。

通过CDN安装：

在HTML代码中添加以下代码：

<!-- 引入CSS文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@8.11.4/dist/sweetalert2.min.css">

<!-- 引入JavaScript文件 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8.11.4/dist/sweetalert2.min.js"></script>

通过下载文件进行安装：

在官网下载sweetAlert2的压缩包，解压后将css和js文件夹中的文件导入工程即可。

使用

在HTML中定义一个按钮，当按钮按下时弹出对话框：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>使用sweetAlert2示例</title>
    <!-- 引入CSS文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@8.11.4/dist/sweetalert2.min.css">
</head>
<body>
    <button id="btn">弹出警告框</button>
    <!-- 引入JavaScript文件 -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@8.11.4/dist/sweetalert2.min.js"></script>
    <script>
        document.querySelector('#btn').onclick = function () {
            swal({
                title: '您确定要删除该记录？',
                text: "删除后将无法恢复，请谨慎操作！",
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: '确定删除',
                cancelButtonText: '取消'
            }).then((result) => {
                if (result.value) {
                    swal(
                        '删除成功！',
                        '您已经成功删除了该记录。',
                        'success'
                    )
                }
            })
        }
    </script>
</body>
</html>

上面代码中，我们定义了一个按钮，并在按钮事件中使用sweetAlert2来弹出警告框，该警告框有确认和取消两个按钮。当用户点击确认按钮时，将会使用sweetAlert2来弹出删除成功的提示框。当用户点击取消按钮时，对话框会关闭。

参数列表

sweetAlert2弹出警告、确认、提示等对话框时，提供了丰富的参数用于自定义对话框的样式和功能。以下为参数列表：

title - 对话框的标题。
text - 对话框的内容。
html - 使用HTML渲染对话框的内容。
type - 对话框的类型，可以是warning（警告）、error（错误）、success（成功）等，也可以是input（输入）、question（问题）等类型。
allowOutsideClick - 是否允许点击对话框外部，关闭对话框。默认值为true。
allowEscapeKey - 是否允许使用ESC键关闭对话框。默认值为true。
showConfirmButton - 是否显示确认按钮。默认值为true。
showCancelButton - 是否显示取消按钮。默认值为false。
confirmButtonText - 确认按钮的文字。
cancelButtonText - 取消按钮的文字。
confirmButtonColor - 确认按钮的背景颜色。
cancelButtonColor - 取消按钮的背景颜色。
confirmButtonClass - 确认按钮的CSS类名。
cancelButtonClass - 取消按钮的CSS类名。
buttonsStyling - 是否为按钮添加样式。默认值为true。
reverseButtons - 是否将确认和取消按钮的位置颠倒。默认值为false。
focusConfirm（focusCancel） - 是否把焦点放在确认（取消）按钮上。默认值为true。
showCloseButton - 是否显示关闭按钮。默认值为false。
onClose - 对话框关闭时的回调函数。
onOpen - 对话框打开时的回调函数。

以上参数中，title、text、type是最常用的参数，其他参数视需求来选择是否使用。

示例说明

示例一：

我们现在需要在网页中实现上传文件的功能，当用户点击上传按钮时，系统会先弹出一个警告对话框，询问用户是否确认上传，并显示上传文件的名称。用户可以选择确认或取消。如果用户选择确认，系统将会弹出一个提示框，提示上传成功。

代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>示例一：上传文件</title>
    <!-- 引入CSS文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@8.11.4/dist/sweetalert2.min.css">
</head>
<body>
    <button id="upload">上传文件</button>
    <!-- 引入JavaScript文件 -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@8.11.4/dist/sweetalert2.min.js"></script>
    <script>
        document.querySelector('#upload').onclick = function () {
            swal({
                title: '您确定要上传该文件？',
                text: "是否确认上传文件【test.txt】",
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: '确定上传',
                cancelButtonText: '取消'
            }).then((result) => {
                if (result.value) {
                    swal(
                        '上传成功！',
                        '文件【test.txt】已经成功上传。',
                        'success'
                    )
                }
            })
        }
    </script>
</body>
</html>

示例二：

我们现在需要在网页中添加一个注册账号的功能，当用户点击注册按钮时，系统将会弹出一个提示对话框，要求用户输入用户名和密码。如果用户输入的用户名和密码不为空，系统将会注册该账号并弹出成功提示框，否则将会弹出失败提示框。

代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>示例二：注册账号</title>
    <!-- 引入CSS文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@8.11.4/dist/sweetalert2.min.css">
</head>
<body>
    <button id="register">注册账号</button>
    <!-- 引入JavaScript文件 -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@8.11.4/dist/sweetalert2.min.js"></script>
    <script>
        document.querySelector('#register').onclick = function () {
            swal({
                title: '注册账号',
                html:
                '<input id="username" class="swal2-input" placeholder="用户名">' +
                '<input id="password" class="swal2-input" placeholder="密码">',
                showCancelButton: true,
                confirmButtonText: '注册',
                cancelButtonText: '取消',
                allowOutsideClick: false,
                preConfirm: () => {
                    const username = swal.getPopup().querySelector('#username').value
                    const password = swal.getPopup().querySelector('#password').value
                    if (!username.trim() || !password.trim()) {
                        swal.showValidationError('用户名和密码不能为空！')
                    }
                    return { username: username, password: password }
                }
            }).then((result) => {
                if (result.value) {
                    swal(
                        '注册成功！',
                        `您已成功注册账号【${result.value.username}】`,
                        'success'
                    )
                }
            })
        }
    </script>
</body>
</html>

以上为两个简单的示例代码，使用sweetAlert2可以轻松实现更加丰富的功能。欢迎大家自行尝试！

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：基于jQuery的弹出警告对话框美化插件(警告，确认和提示) - Python技术站

基于jQuery的弹出警告对话框美化插件(警告，确认和提示)

基于jQuery的弹出警告对话框美化插件攻略

介绍

jQuery插件：sweetalert2

安装

使用

参数列表

示例说明

相关文章