WEB-sweatalert
https://lipis.github.io/bootstrap-sweetalert/
范例1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/fontawesome/css/font-awesome.min.css">
<link rel="stylesheet" href="/static/sweetalert/sweetalert.css">
</head>
<body>
<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-hover">
<thead>
<tr>
<th>序号</th>
<th>id</th>
<th>姓名</th>
<th>年龄</th>
<th>生日</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{% for persion in persions %}
<tr>
<td>{{ forloop.counter }}</td>
<td>{{ persion.pk }}</td>
<td>{{ persion.name }}</td>
<td>{{ persion.age }}</td>
<td>{{ persion.brithday|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>
<script src="/static/jquery-3.3.1.js" ></script>
<script src="/static/setupajax.js" ></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/sweetalert/sweetalert.min.js"></script>
<script>
$('.del').on('click',function () {
var $trEle = $(this).parent().parent();
var delId = $trEle.children().eq(1).text();
swal({
title: "你确定要删除吗？",
text: "删除就不能恢复了",
type: "warning",
showCancelButton: true,
confirmButtonClass: "btn-danger",
confirmButtonText: "确认",
cancelButtonText: "取消",
closeOnConfirm: false,
showLoaderOnConfirm: true
},
function(){
$.ajax({
url: '/cs/swal/',
type: 'POST',
data: {
id: delId
},
success: function (response) {
swal(response, "已删除", "success");
$trEle.remove()
}
});
});
})
</script>
</body>
</html>
浙公网安备 33010602011771号