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

wmh

alertify.js
http://fabien-d.github.io/alertify.js/
用來取代瀏覽器原生訊息框的 JS 函式庫

alertify.js 提供了 alert、confirm 以及 prompt 三個函數用來取代瀏覽器相對應的這三個功能，並且有比較美觀的介面。

引用

你可以直接從 cdnjs 引用 alertify.js 的 js 和 css 檔：

<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>

.

範例 1

取代瀏覽器的訊息框、確認框及輸入框：

相對應的程式碼如下：

alertify.alert('Hi! 這是訊息框，請按下 ok!');

alertify.confirm('這是確認框，你有兩個選擇：', function (e) {
  if (e) {
    alertify.log('你按下了 ok');
  } else {
    alertify.log('你按下了 cancel');
  }
});

alertify.prompt("請留下你的意見：", function (e, str) {
  if (e) {
    alertify.log('你的意見：' + str);
  } else {
    alertify.log('你按下了 cancel');
  }
}, "這個網站棒透了！");

.

範例 2

除了上面看到的三個功能外，還有類似 jGrowl 的訊息通知，請玩玩看下面的範例：

相對應的程式如下：

alertify.log('Hi! 這是標準的訊息通知！');

alertify.success('Hi! 這是成功的訊息通知！');

alertify.error('Hi! 這是錯誤的訊息通知！');

.

更詳細的範例及佈景主題

alertify.js 的用法相當簡單，如果覺得上面的基本範例還不夠用，官方網站有更多範例提供更多參數來呈現訊息。此外還可以有其他樣式可選，比如說類似 Bootstrap v2 風格的視窗及按鈕等等。

官方網站：http://fabien-d.github.io/alertify.js/