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


Alertify下載點

官方網站

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


使用方式

可以到網站下載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="&lt;script&gt;" title="&lt;script&gt;" />


網頁效果

  • 確認視窗範例
// confirm dialog
alertify.confirm("Message", function (e) {
    if (e) {
        // user clicked "ok"
    } else {
        // user clicked "cancel"
    }
});

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

alert1

  • 訊息通知範例
alertify.success('您已登出');  

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

alert2

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


參考資料

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