bootstrap-sweetalert

官网地址：http://lipis.github.io/bootstrap-sweetalert/

模板样式

// 删除书籍，甜甜的警告
$('.bookdel').click(function () {
    var currentBtn = $(this);
    var book_nid =currentBtn.attr('book_nid');
    swal({
        title: "确定删除如下书籍记录?",
        text: currentBtn.attr('book_name'),
        type: "warning",
        showCancelButton: true,
        confirmButtonClass: "btn-danger",
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        closeOnConfirm: false,
        showLoaderOnConfirm: true,
        },
        function () {
            $.ajax({
                // 这里注意，不能使用模板的反向解析，因为在html渲染的时候，无法动态获取，另一种方法就是赋值变量。
                url:'/book_del/'+book_nid+'/',
                type: 'POST',
                data:{'csrfmiddlewaretoken':$("[name='csrfmiddlewaretoken']").val()},
                success: function (args) {
                    if (args.code == 1000) {
                        swal("Deleted!", args.msg, "success");
                        // 删除成功过的Ok点击刷新页面
                        $('.confirm').click(function(){
                            // 利用dom来删除标签，这样不需要刷新，而是留在当前页
                            currentBtn.parent().parent().remove();
                            // window.location.href = args.url;
                            // window.location.reload();
                        })
                        
                    } else {
                        // 删除失败,重新刷新当前页
                        swal("Deleted!", args.msg, "warning");
                    }
                }
            })
        }
    );
});

效果：

 

 

 

 

注意哦：需要引入如下，基本都是3版本

<link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/dist/sweetalert.css">

<script src="/static/js/jquery.min.js"></script>
<script src="/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="/static/dist/sweetalert.min.js"></script>