SweetAlert2是一款功能強大的純Js模態消息對話框插件。SweetAlert2用于替代瀏覽器默認的彈出對話框，它提供各種參數和方法，支持嵌入圖片，背景，HTML標簽等，并提供5種內置的情景類，功能非常強大。

SweetAlert2是SweetAlert-js的升級版本，它解決了SweetAlert-js中不能嵌入HTML標簽的問題，并對彈出對話框進行了優化，同時提供對各種表單元素的支持，還增加了5種情景模式的模態對話框。

安裝

可以通過bower或npm來安裝sweetalert2對話框插件。

bower install sweetalert2 npm install sweetalert2

使用方法

使用SweetAlert2對話框需要在頁面中引入sweetalert2.min.css和sweetalert2.min.js文件，為了兼容IE瀏覽器，還需要引入promise.min.js文件。

<link rel="stylesheet" type="text/css" href="path/to/sweetalert2/dist/sweetalert2.min.css"> <script src="path/to/sweetalert2/dist/sweetalert2.min.js"></script> <!-- for IE support --> <script src="path/to/es6-promise/promise.min.js"></script>

基本使用

最基本的使用方法是通過swal()來彈出一個對話框。

swal('Hello world!');

如果要彈出一個帶情景模式的對話框，可以在的第二個參數中設置。

swal('Oops...', 'Something went wrong!', 'error');

你可以通過下面的方法來處理對話框的用戶交互：

swal({title: 'Are you sure?',text: 'You will not be able to recover this imaginary file!',type: 'warning',showCancelButton: true,confirmButtonText: 'Yes, delete it!',cancelButtonText: 'No, keep it', }).then(function(isConfirm) {if (isConfirm === true) {swal('Deleted!','Your imaginary file has been deleted.','success');} else if (isConfirm === false) {swal('Cancelled','Your imaginary file is safe :)','error');} else {// Esc, close button or outside click// isConfirm is undefined} });

swal(...)會返回一個Promise對象，該Promise對象中then方法中的isConfirm參數的含義如下：

• true：代表Confirm（確認）按鈕。
• false：代表Cancel（取消）按鈕。
• undefined：代表按下Esc鍵，點擊取消按鈕或在對話框之外點擊。

模態對話框的類型

sweetalert2提供了5種情景模式的對話框。

配置參數

參數默認值描述titlenull模態對話框的標題。它可以在參數對象的title參數中設置，也可以在swal()方法的第一個參數設置。textnull模態對話框的內容。它可以在參數對象的text參數中設置，也可以在swal()方法的第二個參數設置。htmlnull對話框中的內容作為HTML標簽。如果同時提供text和html參數，插件將會優先使用text參數。typenull對話框的情景類型。有5種內置的情景類型：warning，error，success，info和question。它可以在參數對象的type參數中設置，也可以在swal()方法的第三個參數設置。customClassnull模態對話框的自定義class類。animationtrue如果設置為false，對話框將不會有動畫效果。allowOutsideClicktrue是否允許點擊對話框外部來關閉對話框。allowEscapeKeytrue是否允許按下Esc鍵來關閉對話框。showConfirmButtontrue是否顯示“Confirm（確認）”按鈕。showCancelButtonfalse是否顯示“Cancel（取消）”按鈕。confirmButtonText"OK"確認按鈕上的文本。cancelButtonText"Cancel"取消按鈕上的文本。confirmButtonColor"#3085d6"確認按鈕的顏色。必須是HEX顏色值。cancelButtonColor"#aaa"取消按鈕的顏色。必須是HEX顏色值。confirmButtonClassnull確認按鈕的自定義class類。cancelButtonClassnull取消按鈕的自定義class類。buttonsStylingtrue為按鈕添加默認的swal2樣式。如果你想使用自己的按鈕樣式，可以將該參數設置為false。reverseButtonsfalse如果你想反向顯示按鈕的位置，設置該參數為true。showLoaderOnConfirmfalse設置為true時，按鈕被禁用，并顯示一個在加載的進度條。該參數用于AJAX請求的情況。preConfirmnull在確認之前執行的函數，返回一個Promise對象。imageUrlnull為模態對話框自定義圖片。指向一幅圖片的URL地址。imageWidthnull如果設置了imageUrl參數，可以為圖片設置顯示的寬度，單位像素。imageHeightnull如果設置了imageUrl參數，可以為圖片設置顯示的高度，單位像素。imageClassnull自定義的圖片class類。timernull自動關閉對話框的定時器，單位毫秒。width500模態窗口的寬度，包括padding值（box-sizing: border-box）。padding20模態窗口的padding內邊距。background"#fff"模態窗口的背景顏色。inputnull表單input域的類型，可以是"text", "email", "password", "textarea", "select", "radio", "checkbox" 和 "file"。inputPlaceholder""input域的占位符。inputValue""input域的初始值。inputOptions{} 或 Promise如果input的值是select或radio，你可以為它們提供選項。對象的key代表選項的值，value代表選項的文本值。inputAutoTrimtrue是否自動清除返回字符串前后兩端的空白。inputValidatornull是否對input域進行校驗，返回Promise對象。inputClassnull自定義input域的class類。

你可以使用swal.setDefaults(customParams)方法來覆蓋默認的參數，customParams是一個對象。

方法

方法描述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域。

瀏覽器兼容

SweetAlert2可以工作在所有的現代瀏覽器中：

• IE: 10+（需要引入Promise文件）
• Microsoft Edge: 12+
• Safari: 4+
• Firefox: 4+
• Chrome 14+
• Opera: 15+

SweetAlert2模態對話框插件的github地址為：https://github.com/limonte/sweetalert2

SweetAlert2模態對話框插件的官方教程地址為：https://sweetalert2.github.io/

SweetAlert2使用教程?www.aliyun01.com

總結

以上是生活随笔為你收集整理的使用html() undefined_SweetAlert2使用教程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。