【一】SweetAlert#

【一】介绍#

SweetAlert 是一个基于 JavaScript 的弹窗插件，用于创建美观而且高度可定制的弹窗效果。
SweetAlert 提供了多种弹窗风格和动画效果，可以用于警告、确认、提示和错误等不同的场景。

【二】特点#

（1）美观可定制#

SweetAlert 提供了漂亮和精心设计的弹窗样式，并且可以通过更改参数来自定义弹窗的外观和行为，使其与网站的样式保持一致。

（2）灵活易用#

使用 SweetAlert 只需要很少的代码量，可以通过简单的调用来创建和展示弹窗，如警告提示、确认对话框等。它还支持回调函数，可以在用户与弹窗交互后执行相应的操作。

（3）良好的用户体验#

SweetAlert 提供了流畅的动画效果和友好的用户体验，可以增强网站的交互性和可用性。

（4）跨平台兼容#

SweetAlert 可以在主流的现代浏览器上运行，包括 Firefox、Chrome、Safari 等。
通过引入 SweetAlert.min.js 和相关的 CSS 文件，你可以在网页中使用 SweetAlert 插件来创建丰富、美观的弹窗，提升用户体验。

【三】使用#

【1】引入资源文件#

1
<script src="https://cdn.bootcdn.net/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>

【2】官网链接#

SweetAlert1官网：SweetAlert
SweetAlert2官网：SweetAlert2 - a beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript’s popup boxes

【3】示例#

1
$("#b55").click(function () {
2
        swal({
3
                    title: "你确定要删除吗？",
4
                    text: "删除可就找不回来了哦！",
5
                    type: "warning",
6
                    showCancelButton: true,  // 是否显示取消按钮
7
                    confirmButtonClass: "btn-danger",  // 确认按钮的样式类
8
                    confirmButtonText: "删除",  // 确认按钮文本
9
                    cancelButtonText: "取消",  // 取消按钮文本
10
                    closeOnConfirm: false,  // 点击确认按钮不关闭弹框
11
                    showLoaderOnConfirm: true  // 显示正在删除的动画效果
12
                },
13
                function () {
14
                    var deleteId = 2;
15
                    $.ajax({
16
                        url: "/delete_book/",
17
                        type: "post",
18
                        data: {"id": deleteId},
19
                        success: function (data) {
20
                            if (data.code === 0) {
21
                                swal("删除成功!", "你可以准备跑路了！", "success");
22
                            } else {
23
                                swal("删除失败", "你可以再尝试一下！", "error")
24
                            }
25
                        }
26
                    })
27
                });
28
    })