點擊圖片免費AI生圖
7、用 sweetalert2 取代 alert 的彈出視窗
2020-09-29
1513
相關文章
剪片頭、剪片尾、剪廣告、免費無損快速視頻切割合併工具 LosslessCut
2023-11-28
【保姆級教程】Bootstrap5 響應式模板不求人 EP01 建立目錄結構與樣板
2023-10-23
Sexy Buttons 2023 快速入門指南和演示
2023-08-27
如何在沒有網路情況下，免費安裝並啟用最新原裝正版的 Windows 11 系統
2023-08-12
IDM 下載 YouTube 視頻的方法與擴充功能模組的安裝
2023-06-22
IDM 2023 安裝與註冊方法 讓下載速度提高5倍的下載神器
2023-05-18
UNICODE UTF-16 字元代碼
2023-04-18
Font Awesome ICON 網頁字型 ICON 使用
2023-04-04
Bootstrap5 切換主題亮色與深色的色彩模式
2023-03-29
不失真縮小圖片檔案大小，讓網站圖片的載入速度加快一倍以上
2023-03-14
opencart4 繁體中文版下載與安裝
2023-03-11
圖片改用webp加快載入速度 XnConvert免安裝轉換器下載
2023-02-22
bootstrap icon 1.10.2 下載與使用
2022-11-29
輕量好用的網頁瀑布流插件 Macy.js (不依賴 Jquery)
2022-08-15
Font Awesome Icon 6.11 2009個免費字型圖示
2022-04-03
最新HTML5響應式模板免費下載持續增加20230812更新
2021-07-19
30個你必須知道的CSS選擇器
2020-12-23
SweetAlert2是一個漂亮的、響應式的、可定制的和可訪問（WAI-ARIA）的JavaScript彈窗，沒有任何依賴。
無論你是在電腦、手機還是平板上，SweetAlert2都會在頁面上自動居中顯示，這看起來非常棒。SweetAlert2還可高度定制
<link rel="stylesheet" href="css/sweetalert2.min.css">
<script src="js/sweetalert2.min.js"></script>
<script>
swal.setDefaults({
confirmButtonText: "確定",
cancelButtonText: "取消"
});
function swal_html(title, html, type='info', btn='關閉'){
swal({
title: title,
type: type,
html: html,
showCloseButton: true,
confirmButtonText: btn,
})
}
</script>
在懶人包內已經有相關檔案，可以直接引用文件或是到SweetAlert2 官網下載最新檔案或參考教學文件，使用時調用swal_html函數，並傳入標題和HTML內容即可:
<a href="#" onclick="swal_html('您好!', '歡迎來到<strong>we-shop.net</strong>')">趕快點我</a>
更多參數配置如下:
你可以使用這些參數，通過一個對象傳入到sweetAlert2中：
|
|
預設值 |
|
|---|---|---|
| title | null | 彈窗HTML標題。可以通過對象的】title】屬性或第一個參數進行傳遞。 |
| titleText | null | 彈窗的文字標題，防止HTML注入。 |
| text | null | 彈窗的文字描述。可以通過對象的】text】屬性或第二個參數進行傳遞。 |
| html | null | 彈窗的HTML描述。如果同時提供了【text】和【html】參數，【text】將被使用。 |
| type | null | 彈窗的類型。SweetAlert2有5個內置類型，可以展示相應的圖標動畫: "warning"、"error"、 "success"、"info"和"question"。可以通過對象的】type】屬性或第三個參數進行傳遞。 |
| target | 'body' | 添加彈窗到該容器元素中。 |
| input | null | 輸入字段類型，可以是 text, email, password, number, tel, range, textarea, select, radio, checkbox, file 和 url. |
| width | '500px' | 彈窗寬度，包括paddings（box-sizing：border-box）。單位可以是px或%。 |
| padding | 20 | 彈窗的padding |
| background | '#fff' | 彈窗的背景（CSS background屬性）. |
| customClass | null | 彈窗的自定義css類 |
| timer | null | 定時關閉彈窗的計時器，單位為ms（毫秒）。 |
| animation | true | 如果設置為false，彈窗的CSS動畫將被禁用。 |
| allowOutsideClick | true | 如果設置為false，用戶無法通過點擊彈窗外部關閉彈窗。 |
| allowEscapeKey | true | 如果設置為false，用戶無法通過按下Escape鍵關閉彈窗。 |
| allowEnterKey | true | 如果設置為false，用戶無法通過按Enter鍵或空格鍵確認彈窗，除非手動使確認按鈕獲得焦點。 |
| showConfirmButton | true | 如果設置為false，【確認】按鈕將會隱藏。 當你使用自定義HTML描述時時，這可能很有用。 |
| showCancelButton | false | 如果設置為true，【取消】按鈕將會顯示，用戶可以點擊取消按鈕關閉彈窗。 |
| confirmButtonText | 'OK' | 使用該參數來修改【確認】按鈕的顯示文字。 |
| cancelButtonText | 'Cancel' | 使用該參數來修改【取消】按鈕的顯示文字。 |
| confirmButtonColor | '#3085d6' | 使用該參數來修改【確認】按鈕的背景顏色（必須是十六進制值）。 |
| cancelButtonColor | '#aaa' | 使用該參數來修改【取消】按鈕的背景顏色（必須是十六進制值）。 |
| confirmButtonClass | null | 可以為【確認】按鈕設置自定義類 |
| cancelButtonClass | null | 可以為【取消】按鈕設置自定義類 |
| buttonsStyling | true | 預設按鈕樣式使用swal2的樣式，如果你想要使用自己的CSS類（例如Bootstrap類），將該參數設置為false。 |
| reverseButtons | false | 如果想要調換預設按鈕的位置（將【確認】按鈕放到右邊），將該參數設置為true |
| focusCancel | false | 如果想要在預設情況下【取消】按鈕獲取焦點，將該參數設置為true |
| showCloseButton | false | 設置為true，在彈窗的右上角顯示關閉按鈕。 |
| showLoaderOnConfirm | false | 設置為true會禁用按鈕並顯示loading，適用於AJAX請求。 |
| preConfirm | null | 確認之前執行的函數，應返回Promise，請參考使用案例。 |
| imageUrl | null | 為彈窗添加一個自定義圖標。這個參數是一個字符串圖片路徑。 |
| imageWidth | null | 如果設置了imageUrl，你可以指定imageWidth來設置圖標的寬度，單位為px。 |
| imageHeight | null | 設置自定義圖標的高度，單位為px。 |
| imageClass | null | 設置自定義圖標的CSS類 |
| inputPlaceholder | '' | 輸入框的placeholder |
| inputValue | '' | 輸入框的初始值。 |
| inputOptions | {} or Promise | 如果input參數設置為"select"或"radio"，你可以設置該參數。對象key將表示項的值，對象value將表示項的顯示文字 |
| inputAutoTrim | true | 自動刪除字符串首尾兩端的空格。設置該參數為false會禁用自動去空格。 |
| inputAttributes | {} | 添加到輸入框的HTML input元素屬性（例如min, max, autocomplete, accept）。對象key將表示屬性名稱，對象值將表示屬性值。 |
| inputValidator | null | 輸入框的驗證器，應返回Promise，請參考使用案例。 |
| inputClass | null | 輸入框的自定義CSS類。 |
| progressSteps | [] | 進度步驟對彈窗隊列很有用，請參考使用示例。 |
| currentProgressStep | null | 當前啟用的進度步驟，預設值是swal.getQueueStep() |
| progressStepsDistance | '40px' | 進度步驟之間的距離。 |
| onOpen | null | 彈窗打開時運行的函數，彈窗DOM元素作為第一個參數提供給該函數。 |
| onClose | null | 彈窗關閉時運行的函數，彈窗DOM元素作為第一個參數提供給該函數。 |
你可以使用swal.setDefaults(customParams)重新定義預設參數。
如果你對7、用 sweetalert2 取代 alert 的彈出視窗有任何問題請到討論區發帖。