使用 Alertify.js 美化訊息視窗

如果想要讓訊息視窗變的漂亮些，可以試試 alertify.js。它提供 alert、confirm 以及 prompt 三個函數來取代原先的三個功能

Alertify下載點

官方網站

http://fabien-d.github.io/alertify.js/

原作者已經不再更新，不過會列出一些 fork，以下這兩個美化的不錯

• https://alertifyjs.org/
• http://alertifyjs.com/

使用方式

可以到網站下載 CSS 和 JS 檔案，或由 CDNJS 引入

<link href="//cdnjs.cloudflare.com/ajax/libs/alertify.js/0.3.10/alertify.core.css" rel="stylesheet">
<link href="//cdnjs.cloudflare.com/ajax/libs/alertify.js/0.3.10/alertify.default.css" rel="stylesheet"> 
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Falertify.js%2F0.3.10%2Falertify.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />

網頁效果

確認視窗範例

// confirm dialog
alertify.confirm("Message", function(e) {
    if (e) {
        // user clicked "ok"
    } else {
        // user clicked "cancel"
    }
});

確認視窗變得不再呆板，有半透明外框與不同顏色的按鈕，如下圖

訊息通知範例

alertify.success('您已登出');

可以在網頁右下角看到跳出的訊息，如下圖：

更詳盡的用法，請參考官方網站

參考資料

alertify.js – 美化訊息視窗、取代瀏覽器原生訊息框的函式庫