取代單調 window.alert() 的好選擇

嫌瀏覽器內建的 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 才能相容) 線上展示

SweetAlert2 提供極佳擴充性,例如:

支援 Footer 區塊顯示額外訊息 title、html 等參數可直接輸入 HTML (若確定輸入的是純文字,想加上 HtmlEncode(),可改用 titleText、text 參數) 確認取消鈕的文字、樣式均可修改 可自訂顯示及消失動畫 顯示訊息支援圖片 支援倒數自動關閉 支援步驟一、步驟二、步驟三式串接 可在按鈕事件觸發 AJAX 呼叫 以上在官網都有可實際操作的線上展示,說明文件也十分完整,只能大推了!

補上一些使用經驗:

使用 Swal.fire('...', '...') 簡單寫法時,第一個參數為 title、第二個參數為 html,都允許內嵌 HTML,但有簡單的 XSS 防護(內嵌