背景：
項目的開發中經常會遇到彈窗的問題，但是我們用到的彈窗都特別low，而且網上找了一下，發現easy-ui以及layer對應的彈窗都不是我想要的，后來發現sweetalert，發現評論還不錯，所以個人嘗試一下，並記錄一下使用過程，便於他人借鑒。
SweetAlert2是一款功能強大的純Js模態消息對話框插件。SweetAlert2用於替代瀏覽器默認的彈出對話框，它提供各種參數和方法，支持嵌入圖片，背景，HTML標簽等，並提供5種內置的情景類，功能非常強大。
SweetAlert2是SweetAlert-js的升級版本，它解決了SweetAlert-js中不能嵌入HTML標簽的問題，並對彈出對話框進行了優化，同時提供對各種表單元素的支持，還增加了5種情景模式的模態對話框。
使用方法：
使用sweetalert對話框需要引入對應的js和css（如 sweetalert2.min.css 和 sweetalert2.min.js），因為里面的promise屬性不支持ie11，所以也需要引入promise.min.js文件，而且改js必須依托jQuery，所以需要引入jquery.min.js。如下圖：
<link rel="stylesheet" href="sweetalert/sweetalert2.min.css" /> <script type="text/javascript" src="jquery3.1.0/jquery-3.1.0.min.js"></script> <script type="text/javascript" src="sweetalert/es6-promise.auto.js"></script> <script type="text/javascript" src="sweetalert/sweetalert2.min.js"></script>
但是在網上下載的時候發現要不就是需要csdn積分，要不下載的就不能用，所以此處提供一個下載的鏈接：
https://www.bootcdn.cn/limonte-sweetalert2/
首先創建2個文件，一個是css文件，一個js文件，然后打開這個網站之后，找到自己想要版本的css和js，然后打開對應的鏈接，復制里面內容分別粘貼到自己創建的文件中即可使用，以測試。
基本用法：
最基本的使用方法是通過swal()來彈出一個對話框。
swal("Hello world!");
如果要彈出一個帶情景模式的對話框，可以在的第二個參數中設置。
swal("Good job!", "You clicked the button!", "success");
配置參數：
| 參數 | 默認值 | 描述 |
| title | null | 模態對話框的標題。它可以在參數對象的title參數中設置，也可以在swal()方法的第一個參數設置。 |
| text | null | 模態對話框的內容。它可以在參數對象的text參數中設置，也可以在swal()方法的第二個參數設置。 |
| html | null | 對話框中的內容作為HTML標簽。如果同時提供text和html參數，插件將會優先使用text參數。 |
| type | null | 對話框的情景類型。有5種內置的情景類型：warning，error，success，info和question。它可以在參數對象的type參數中設置，也可以在swal()方法的第三個參數設置。 |
| customClass | null | 模態對話框的自定義class類。 |
| animation | true | 如果設置為false，對話框將不會有動畫效果。 |
| allowOutsideClick | true | 是否允許點擊對話框外部來關閉對話框。 |
| allowEscapeKey | true | 是否允許按下Esc鍵來關閉對話框。 |
| showConfirmButton | true | 是否顯示“Confirm（確認）”按鈕。 |
| showCancelButton | false | 是否顯示“Cancel（取消）”按鈕。 |
| confirmButtonText | "OK" | 確認按鈕上的文本。 |
| cancelButtonText | "Cancel" | 取消按鈕上的文本。 |
| confirmButtonColor | "#3085d6" | 確認按鈕的顏色。必須是HEX顏色值。 |
| cancelButtonColor | "#aaa" | 取消按鈕的顏色。必須是HEX顏色值。 |
| confirmButtonClass | null | 確認按鈕的自定義class類。 |
| cancelButtonClass | null | 取消按鈕的自定義class類。 |
| buttonsStyling | true | 為按鈕添加默認的swal2樣式。如果你想使用自己的按鈕樣式，可以將該參數設置為false。 |
| reverseButtons | false | 如果你想反向顯示按鈕的位置，設置該參數為true。 |
| showLoaderOnConfirm | false | 設置為true時，按鈕被禁用，並顯示一個在加載的進度條。該參數用於AJAX請求的情況。 |
| preConfirm | null | 在確認之前執行的函數，返回一個Promise對象。 |
| imageUrl | null | 為模態對話框自定義圖片。指向一幅圖片的URL地址。 |
| imageWidth | null | 如果設置了imageUrl參數，可以為圖片設置顯示的寬度，單位像素。 |
| imageHeight | null | 如果設置了imageUrl參數，可以為圖片設置顯示的高度，單位像素。 |
| imageClass | null | 自定義的圖片class類。 |
| timer | null | 自動關閉對話框的定時器，單位毫秒。 |
| width | 500 | 模態窗口的寬度，包括padding值（box-sizing: border-box）。 |
| padding | 20 | 模態窗口的padding內邊距。 |
| background | "#fff" | 模態窗口的背景顏色。 |
| input | null | 表單input域的類型，可以是"text", "email", "password", "textarea", "select", "radio", "checkbox" 和 "file"。 |
| inputPlaceholder | "" | input域的占位符。 |
| inputValue | "" | input域的初始值。 |
| inputOptions | {} 或 Promise | 如果input的值是select或radio，你可以為它們提供選項。對象的key代表選項的值，value代表選項的文本值。 |
| inputAutoTrim | true | 是否自動清除返回字符串前后兩端的空白。 |
| inputValidator | null | 是否對input域進行校驗，返回Promise對象。 |
| inputClass | null | 自定義input域的class類。 |
| 參數 | 默認值 | 描述 |
方法：
| 方法 | 描述 |
| swal.setDefaults({Object}) | 當你在使用SweetAlert2時有大量的自定義參數，可以通過swal.setDefaults({Object})方法來將它們設置為默認參數。 |
| swal.resetDefaults() | 重置設置的默認值。 |
| swal.queue([Array]) | 提供一個數組形式的SweetAlert2參數，用於顯示多個對話框。對話框將會一個接一個的出現。 |
| swal.close() 或 swal.closeModal() |
以編程的方式關閉當前打開的SweetAlert2對話框。 |
| swal.enableButtons() | 確認和關閉按鈕可用。 |
| swal.disableButtons() | 禁用確認和關閉按鈕。 |
| swal.enableLoading() 或 swal.showLoading() |
禁用按鈕並顯示加載進度條。通常用於AJAX請求。 |
| swal.disableLoading() 或 swal.hideLoading() |
隱藏進度條並使按鈕可用。 |
| swal.clickConfirm() | 以編程的方式點擊確認按鈕。 |
| swal.clickCancel() | 以編程的方式點擊取消按鈕。 |
| swal.showValidationError(error) | 顯示表單校驗錯誤信息。 |
| swal.resetValidationError() | 隱藏表單校驗錯誤信息。 |
| swal.enableInput() | 使input域可用。 |
| swal.disableInput() | 禁用input域。 |
| 方法 | 描述 |