sweetalert插件使用

内容：

1.插件介绍

2.插件使用

1.插件介绍

SweetAlert是一个JS插件，能够完美替代JS自带的alert弹出框，并且功能强大，设计优美

使用这个很方便，推荐使用这个插件来写alert

sweetalert插件下载：https://github.com/lipis/bootstrap-sweetalert

官方教程：https://sweetalert.js.org/guides/

2.插件使用

下面是使用sweetalert的一个实例：

HTML：

 <div class="container">
     <div class="panel panel-primary">
         <div class="panel-heading">
             <h3 class="panel-title">用户管理</h3>
         </div>
         <div class="panel-body">
             <table class="table table-bordered">
                 <thead>
                 <tr>
                     <th>序号</th>
                     <th>id</th>
                     <th>name</th>
                     <th>age</th>
                     <th>生日</th>
                     <th>操作</th>
                 </tr>
                 </thead>
                 <tbody>
                 {% for p in persons %}
                     <tr>
                         <td>{{ forloop.counter }}</td>
                         <td>{{ p.id }}</td>
                         <td>{{ p.name }}</td>
                         <td>{{ p.age }}</td>
                         <td>{{ p.birthday|date:'Y-m-d' }}</td>
                         <td>
                             <button class="btn btn-danger del"><i class="fa fa-trash-o">删除</i></button>
                         </td>
                     </tr>
                 {% endfor %}

                 </tbody>
             </table>
         </div>
     </div>
 </div>

注：前端使用了bootstrap框架

js：

 $(".btn-danger").on("click", function () {
   swal({
     title: "确定要删除吗？",
     text: "删除就无法找回",
     type: "warning",
     showCancelButton: true,
     confirmButtonClass: "btn-danger",
     confirmButtonText: "确认",
     cancelButtonText: "取消",
     closeOnConfirm: false
     },
     function () {
       var deleteId = $(this).parent().parent().attr("data_id");
       $.ajax({
         url: "/delete_book/",
         type: "post",
         data: {"id": deleteId},
         success: function (data) {
           if (data.status === 1) {
             swal("删除成功!", "你可以跑路了！", "success");
           } else {
             swal("删除失败", "你可以再尝试一下！", "error")
           }
         }
       })
     });
 })

注：

swal使用如下：

 // swal是调用弹出框，有如下几种调用方式:
 swal("标题")
 swal("标题", "内容")
 swal("标题", "内容", "success")
 swal("标题", "内容", "warning")
 swal("标题", "内容", "info")
 swal("标题", "内容", "error")

效果如下：