sweetalert api文檔

官網和下載地址： 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中文翻譯是模態框 ,次文檔為了理解容易，現在統一翻譯為動態彈出框

參數	默認值	說明描述
title	null (required)	動態彈出框的標題。 它可以添加到鍵“title”下的對象，也可以作為函數的第一個參數傳遞
text	null	動態彈出框的描述。 它可以被添加到鍵“文本”下的對象或作為函數的第二個參數傳遞
type	null	動態彈出框的類型。 SweetAlert自帶4種內置類型，會顯示相應的圖標動畫：“warning”，“error”，“success”和“info”。 您也可以將其設置為“輸入”以獲得提示模態。 它可以放在鍵“類型”下的對象中，也可以作為函數的第三個參數傳遞
allowEscapeKey	true	如果設置為true，用戶可以通過按退出鍵退出動態彈出框
customClass	null	模態的自定義CSS類。 它可以添加到對象的鍵“自定義類”下
allowOutsideClick	false	如果設置為true，用戶可以通過點擊模態來關閉動態彈出框
showCancelButton	false	如果設置為true，將顯示一個“取消”按鈕，用戶可以單擊該按鈕來關閉動態彈出框
showConfirmButton	true	如果設置為false，“確定/確認”按鈕將被隱藏。 確保您設置一個計時器或設置允許外點擊為true時使用此，以免引起用戶的煩惱
confirmButtonText	"OK"	使用此按鈕可以更改“確認”按鈕上的文本。 如果showsCancelButton設置為true，確認按鈕將自動顯示“Confirm”，而不是“OK”
confirmButtonColor	"#AEDEF4"	使用此選項可更改“確認”按鈕的背景顏色（必須為十六進制值）
cancelButtonText	"Cancel"	使用此按鈕可以更改“取消”按鈕上的文本
closeOnConfirm	true	如果您希望動態彈出框保持打開，即使用戶按下“確認”按鈕，設置為false。 如果附加到“確認”按鈕的功能是另一個SweetAlert，這是特別有用的
closeOnCancel	true	與關閉相同確認，但用於取消按鈕
imageUrl	null	為動態彈出框添加自定義圖標。 應包含帶有圖像路徑的字符串
imageSize	"80x80"	如果設置了imageUrl，您可以指定imageSize來描述圖標在px中的大小。 傳遞一個字符串，兩個值之間用“x”分隔。 第一個值是寬度，第二個值是高度
timer	null	動態彈出框的自動關閉定時器。 設置為ms（毫秒）。
html	false	如果設置為true，將不轉義標題和文本參數。 （如果您擔心XSS攻擊，請設置為false。）
animation	true	如果設置為false，動態彈出框動畫將被禁用。 可能的（字符串）值：pop（動畫設置為true時的默認值），從頂部滑動，從底部滑動
inputType	"text"	使用type：“input”時更改輸入字段的類型（如果您希望用戶輸入其密碼，這將非常有用）
inputPlaceholder	null	使用輸入類型時，可以指定一個占位符來幫助用戶
inputValue	null	指定在使用類型時希望輸入顯示的默認文本值：“input”
showLoaderOnConfirm	false	設置為true可禁用按鈕，並顯示正在加載某些內容

方法舉例

SweetAlert還提供了一些簡單的方法，你可以調用：

方法	例子	方法說明
setDefaults	swal.setDefaults({ confirmButtonColor: '#0000' });	如果你在調用SweetAlert時最終使用了很多相同的設置，你可以在程序的開始使用setDefaults來設置它們一次
close	swal.close();	以編程方式關閉當前打開的SweetAlert
showInputError	swal.showInputError("Invalid email!");	如果用戶的數據不正確，請在驗證輸入字段后顯示錯誤消息
enableButtons, disableButtons	swal.disableButtons();	禁用或啟用用戶單擊取消和確認按鈕

 

參考文章：

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

http://www.cnblogs.com/zx-admin/p/6009558.html