導讀:建站文章建站文章SweetAlert2是一個優秀的JavaScript插件，用于自定義彈出框。與瀏覽器默認的alert（警告）、confirm（確認）和prompt（提示）對話網站seo優化診斷工具網站建設教程。

SweetAlert2是一個優秀的JavaScript插件，用于自定義彈出框。與瀏覽器默認的alert（警告）、confirm（確認）和prompt（提示）對話框相比，SweetAlert2提供了更多的自定義選項，讓開發者可以輕松地創建美觀且易于使用的彈出框。

SweetAlert2的特性

以下是SweetAlert2的主要特性：

• 美觀和易于使用的界面：SweetAlert2提供了漂亮的默認樣式，并且還支持自定義樣式。
• 可定制的選項：SweetAlert2允許開發者自定義標題、文本、圖標、按鈕等選項，以滿足不同的需求。
• 簡單易用：SweetAlert2的API非常簡單易用，開發者可以很容易地在項目中集成它。
• 跨平臺兼容性：SweetAler營銷型網站建設t2可以在所有現代瀏覽器和移動設備上運行，而且不需要額外的依賴。

SweetAlert2的用法

使用SweetAlert2非常簡單。首先，需要在HTML文件中引入SweetAlert2的CSS和JavaScript文件。

<!-- 引入CSS文件 --> <link rel="stylesheet" > <!-- 引入JS文件 --> <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10.16.0/dist/sweetalert2.min.js"></script>

然后，使用SweetAlert2的API來創建彈出框。

// 基本用法 Swal.fire('Hello world!')

上述代碼將創建一個簡單的彈出框，顯示“Hello world!”文本。

SweetAlert2的示例

以下是一些SweetAlert2的示例，演示了如何創建不同類型的彈出框：

帶有標題和文本的彈出框

Swal.fire({ title: '提示', text: '這是一條提示信息！', icon: 'info' })

帶有自定義按鈕的彈出框

Swal.fire({ title: '確認刪除？', text: '你確定要刪除這個文件嗎？', icon: 'warning', showCancelButton: true, confirmButtonText: '是的，我要刪除它！', cancelButtonText: '取消' }).then((result) => { if (result.isConfirmed) { Swal.fire( '已刪除！', '你的文件已經被刪除。', 'success' ) } })

帶有輸入表單的彈出框

Swal.fire({ title: '登錄', html: '<input id="swal-input1" class="swal2-input" placeholder="用戶名">' + '<input id="swal-input2" class="swal2-input" placeholder="密碼" type="password">', focusConfirm: false, preConfirm: () => { co網站建設哪家好nst username = document.getElementById('swal-input1').value const password = document.getElementById('swal-input2').value if (!username || !password) { Swal.showValidationMessage(`請輸入用戶名和密碼。`) } return { username: username, password: password } } }).then((result) => { Swal.fire(` 用戶名：${result.value.username} 密碼：${result.value.password} `) })

關鍵詞標簽: 建站 SweetAlert