嫌瀏覽器內建的 alert() / confirm() 太醜,Kendo UI 有 kendo.alert() 與 kendo.confirm() 可取代 window.alert()/confirm(),小缺點是標題列一律顯示網址難以調整,加上網頁未必就有引用 Kendo UI,為此下載龐大的 Kendo UI js 有殺雞用牛刀之嫌。
我找到一個美觀大方使用簡便,可取代 window.alert() 的程式庫 - SweetAlert2。(其實今天是我第二次用它,前次使用沒寫筆記,下場是重查一次文件。記取教訓,回家乖乖補交功課,防止下次再查第三次 Orz... 誰來救救中年人的腦子?)
引用 SweetAlert2 的方法有兩種,第一種是使用內含 css 可自動注入的 sweetalert2.all.min.js,另外也可分別載入 sweetalert2.min.js 及 sweetalert2.min.css,官方 CDN 位置在 https://www.jsdelivr.com/package/npm/sweetalert2。
SweetAlert2 不依賴 jQuery,跟 jQuery、React、Angular、Vue.js 都能和平相處,個性隨和。
用 SweetAlert2 取代 alert() / confirm() 的起手式如下: (注意:IE11 需加掛 Promise Polyfill 才能相容) 線上展示
function alertTest() {
Swal.fire(
"查詢作業失敗", //標題
"您所輸入的序號不存在或是系統被玩壞了!", //訊息內容(可省略)
"error" //圖示(可省略) success/info/warning/error/question
//圖示範例:https://sweetalert2.github.io/#icons
);
}
function confirmTest() {
Swal.fire({
title: "操作確認",
text: "請點選你想按的按鈕",
showCancelButton: true
}).then(function(result) {
if (result.value) {
Swal.fire("您按了OK");
}
else {
Swal.fire("您選擇了Cancel");
}
});
}
SweetAlert2 提供極佳擴充性,例如:
支援 Footer 區塊顯示額外訊息 title、html 等參數可直接輸入 HTML (若確定輸入的是純文字,想加上 HtmlEncode(),可改用 titleText、text 參數) 確認取消鈕的文字、樣式均可修改 可自訂顯示及消失動畫 顯示訊息支援圖片 支援倒數自動關閉 支援步驟一、步驟二、步驟三式串接 可在按鈕事件觸發 AJAX 呼叫 以上在官網都有可實際操作的線上展示,說明文件也十分完整,只能大推了!
補上一些使用經驗:
使用 Swal.fire('...', '...') 簡單寫法時,第一個參數為 title、第二個參數為 html,都允許內嵌 HTML,但有簡單的 XSS 防護(內嵌