官網和下載地址： http://t4t5.github.io/sweetalert/

基本使用：

• 基本消息消息彈窗

  swal("Here's a message!")

• 下面有文字的標題彈窗

  swal("Here's a message!", "It's pretty, isn't it?")

• 一個成功的消息彈窗

  swal("Good job!", "You clicked the button!", "success")

• 一個警告消息，其功能附加到“確認”按鈕的彈窗

  swal({
    title: "Are you sure?",
    text: "You will not be able to recover this imaginary file!",
    type: "warning",
    showCancelButton: true,
    confirmButtonColor: "#DD6B55",
    confirmButtonText: "Yes, delete it!",
    closeOnConfirm: false
  },
  function(){
    swal("Deleted!", "Your imaginary file has been deleted.", "success");
  });

• 并通過傳遞一個參數，你可以執行別的“取消”

  swal({
    title: "Are you sure?",
    text: "You will not be able to recover this imaginary file!",
    type: "warning",
    showCancelButton: true,
    confirmButtonColor: "#DD6B55",
    confirmButtonText: "Yes, delete it!",
    cancelButtonText: "No, cancel plx!",
    closeOnConfirm: false,
    closeOnCancel: false
  },
  function(isConfirm){
    if (isConfirm) {
      swal("Deleted!", "Your imaginary file has been deleted.", "success");
    } else {
      swal("Cancelled", "Your imaginary file is safe :)", "error");
    }
  });

• 帶有自定義圖標

  swal({
    title: "Sweet!",
    text: "Here's a custom image.",
    imageUrl: "images/thumbs-up.jpg"
  });

• 自定義HTML消息

  swal({
    title: "HTML <small>Title</small>!",
    text: "A custom <span style="color:#F8BB86">html<span> message.",
    html: true
  });

• 帶有自動關閉計時器的消息的彈窗

  swal({
    title: "Auto close alert!",
    text: "I will close in 2 seconds.",
    timer: 2000,
    showConfirmButton: false
  });

• 替換“提示”功能

  swal({
    title: "An input!",
    text: "Write something interesting:",
    type: "input",
    showCancelButton: true,
    closeOnConfirm: false,
    animation: "slide-from-top",
    inputPlaceholder: "Write something"
  },
  function(inputValue){
    if (inputValue === false) return false;
    
    if (inputValue === "") {
      swal.showInputError("You need to write something!");
      return false
    }
    
    swal("Nice!", "You wrote: " + inputValue, "success");
  });

• 使用加載器（例如AJAX請求）

  swal({
    title: "Ajax request example",
    text: "Submit to run ajax request",
    type: "info",
    showCancelButton: true,
    closeOnConfirm: false,
    showLoaderOnConfirm: true,
  },
  function(){
    setTimeout(function(){
      swal("Ajax request finished!");
    }, 2000);
  });

• 你也可以改變SweetAlert的主題css

  <link rel="stylesheet" type="text/css"href="dist/sweetalert.css">
  <link rel="stylesheet" type="text/css"href="themes/twitter.css">

安裝

1. 通過引用必要的文件來初始化插件：

   <script src="dist/sweetalert.min.js"></script>
   <link rel="stylesheet" type="text/css" href="dist/sweetalert.css">

2. 頁面加載后調用SweetAlert函數

   swal({
     title: "Error!",
     text: "Here's my error message!",
     type: "error",
     confirmButtonText: "Cool"
   });

配置

這里是你可以使用的鍵，如果你傳遞一個對象到sweetAlert：

modal中文翻譯是模態框 ,次文檔為了理解容易，現在統一翻譯為動態彈出框

方法舉例

參考文章：

http://t4t5.github.io/sweetalert/

http://www.rzrgm.cn/zx-admin/p/6009558.html