如果想要讓訊息視窗變的漂亮些,可以試試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">
<script src="//cdnjs.cloudflare.com/ajax/libs/alertify.js/0.3.10/alertify.min.js"></script>


網頁效果

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

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

alert1

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

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

alert2

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


參考資料

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