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


Alertify下載點

官方網站

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

原作者已經不再更新,不過會列出一些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="<script>" title="<script>" />

網頁效果

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

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

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

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

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


參考資料

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