SweetAlert
官网地址
CDN方式使用
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
下载到本地
https://unpkg.com/sweetalert@2.1.2/dist/sweetalert.min.js
swal({ title: "Are you sure?", text: "Once deleted, you will not be able to recover this imaginary file!", icon: "warning", buttons: ["取消","确定"], dangerMode: true, }) .then((willDelete) => { if (willDelete) { swal("Poof! Your imaginary file has been deleted!", { icon: "success", }); } else { swal("Your imaginary file is safe!"); } });
列:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>班级管理</title> {% load static %} <link rel="stylesheet" href="{% static 'plugins/bootstrap-3.3.7/css/bootstrap.min.css' %}"> <link rel="stylesheet" href="{% get_static_prefix %}css/dsb.css"> <link rel="stylesheet" href="/static/plugins/font-awesome-4.7.0/css/font-awesome.min.css"> </head> <body> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">学员管理系统</a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Dashboard</a></li> <li><a href="#">Settings</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Help</a></li> </ul> <form class="navbar-form navbar-right"> <input type="text" class="form-control" placeholder="Search..."> </form> </div> </div> </nav> <div class="container-fluid"> <div class="row"> <div class="col-sm-3 col-md-2 sidebar"> <ul class="nav nav-sidebar"> <li class="active"><a href="{% url 'grade' %} }"> 班级管理<span class="sr-only">(current)</span></a></li> <li><a href="{% url 'student' %}">学员管理<span class="sr-only">(current)</span></a></li> <li><a href="{% url 'teacher' %}">教师管理<span class="sr-only">(current)</span></a></li> </ul> </div> <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title text-center">班级表</h3> </div> <div class="panel-body"> <a class="btn btn-primary btn-sm pull-right " href="/add_grade/"> <i class="fa fa-plus-square fa-1x" aria-hidden="true"></i> 添加班级</a> <div class="table-responsive"> <table class="table table-striped table-hover table-bordered"> <thead> <tr> <th>序号</th> <th>班级</th> <th>老师</th> <th>操作</th> </tr> </thead> <tbody> {% for grade in all_grade %} <tr> <td>{{ forloop.counter }}</td> <td>{{ grade.name }}</td> <td> {% for teacher in grade.teacher_set.all %} {% if forloop.last %} {{ teacher }} {% else %} {{ teacher }}、 {% endif %} {% endfor %} </td> <td> {# <a class="btn btn-danger btn-sm" href="/del_grade/?pk={{ grade.pk }}"><i#} {# class="fa fa-trash-o fa-lg"></i> 删除</a>#} <a pk="{{ grade.pk }}" class="btn btn-danger btn-sm"><i class="fa fa-trash-o fa-lg"></i> 删除</a> <a class="btn btn-info btn-sm" href="/edit_grade/?pk={{ grade.pk }}"><i class="fa fa-edit" aria-hidden="true"></i> 编辑</a> </td> </tr> {% endfor %} </tbody> </table> </div> </div> </div> </div> </div> </div> </body> {% load static %} <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="{% static 'js/sweetalert.js' %}"></script> <script> $('.btn-danger').click(function () { swal({ title: "确定删除?", text: "删除后将无法恢复!!!", icon: "warning", buttons: ["取消", "确定"], dangerMode: true, }) .then((willDelete) => { if (willDelete) { $.ajax({ url: '/del_grade/?pk=' + $(this).attr('pk') , success: () => { swal("删除成功!", { icon: "success", }); $(this).parent().parent().remove() } }); } else { swal("取消删除!"); } }) }); </script> </html>
