一、说明
1.实现功能:美化alert窗口
2.下载地址:https://github.com/lipis/bootstrap-sweetalert
3.实例代码:https://lipis.github.io/bootstrap-sweetalert/
4.实现效果在实例代码中可以看见,上面两张图也是.
二、在Django中使用
1.在static目录下的任意文件夹内 引入 sweetalert.css 和 sweetalert.min.js 这两个文件
2.在html中引用上面两个资源文件:(下面代码多余的可以去掉,只要两个)
<script type="text/javascript" src="{% static 'common/jquery/jquery-3.3.1.js' %}"></script>
<script type="text/javascript" src="{% static 'common/bootstrap/js/bootstrap.min.js' %}"></script>
<script type="text/javascript" src="{% static 'common/sweetalert/sweetalert.min.js' %}"></script>
<script type="text/javascript" src="{% static 'blog/js/fi.js' %}"></script>
<script type="text/javascript" src="{% static 'tiny_mce/tiny_mce.js' %}"></script>
<link rel="stylesheet" href=" {% static 'common/bootstrap/css/bootstrap.min.css' %} " />
<link rel="stylesheet" href=" {% static 'common/sweetalert/sweetalert.css' %} " />
<link rel="stylesheet" href=" {% static 'common/fontawesome/css/font-awesome.min.css' %} " />
3.在js代码的适当位置引用sweetalert的swal方法
$(".del").click(function(){
var $trEle =$(this).parent().parent();
var delId = $trEle.children().eq(0).text();
console.warn($(this).parent().parent());
swal({
title: "确定删除吗?",
text: "操作不可逆!",
type: "warning",
showCancelButton: true,
confirmButtonClass: "btn-danger",
confirmButtonText: "再次确认!",
cancelButtonText:"取消",
closeOnConfirm: false
},
function(){
$.ajax({
url:"delPerson/",
type:"POST",
data:{"delId":delId,"csrfmiddlewaretoken": $("[name = 'csrfmiddlewaretoken']").val()},
success:function(arg){
swal(arg, "此条记录已经删除.", "success");
$trEle.remove();
}
});
});
});
这里的代码流程是:
a.找到某个删除按钮,当它点击的时候,弹出sweetalert框,让你再次确认.
b.确认之后发送Ajax请求,用POST方式提交,参数里面设置了csrf标识,取消不进行任何其它操作。
c.内部数据删除之后,返回一个删除成功的页面,在html上面利用js代码删除当按钮所在的行。
4.注意事项
a.ajax请求里不要放dataType,否则删除成功后无法弹出界面