sweetAlert插件 | Bootstrap

1.下载插件

　　sweetAlert插件　bootstrap插件　jquery插件

需要引入插件中sweetalert.css，sweetalert.min.js两个文件，以及bootstrap.min.js，bootstrap.min.css，jquery.min.js三个文件;

2.普通警告框

swal()方法来替代alert()；

三个参数：1.标题； 2.内容； 3.样式；

     

3.提示确认警告框

$(".btn-danger").on("click", function () {
  swal({
    title: "你确定要删除吗？",
    text: "删除后无法恢复！",
    type: "warning",
    showCancelButton: true,
    confirmButtonClass: "btn-danger",
    confirmButtonText: "删除",
    cancelButtonText: "取消",
    closeOnConfirm: false
    },
    function () {
      var $trEle = $(this).parent().parent();  // 找到当前tr对象;
      var deleteId = $trEle.attr("data_id");
      $.ajax({
        url: "/delete/",
        type: "post",
        data: {"id": deleteId},
        success: function (data) {
          if (data.status === 1) {
            swal("删除成功!", "你可以准备跑路了！", "success");
            $trEle.remove()  // 后端删除数据之后,js删除前端tr标签对象;
          } else {
            swal("删除失败", "你可以再尝试一下！", "error")
          }
        }
      })
    });
})

4.其他样式

// 在swal中添加参数：

1.自定义图标：imageUrl: "images/thumbs-up.jpg";

2.添加html样式text：text: <div>...<div>, html:true;

3.限时关闭窗口：timer: 2000;

4.更多样式查看：SweetAlert中文网