最近更新: 2018-08-02

overlayMessage - non-jquery-ui

overlayMessage 是一個顯示全頁覆蓋訊息的網頁 UI 項目 。它完全獨立,不使用其他 JavaScript 套件。

其設計目的是在執行非同步工作時,顯示覆蓋全頁的訊息,阻擋使用者操作頁面的內容。例如使用 XmlHttpRequest 上傳表單資料時,防止使用者在上傳完成前修改表單。

Source Repo: non-jquery-ui

  • 相容性: 所有符合 HTML5 規格的瀏覽器;微軟 IE8 到 IE11 。
  • 依賴套件: 無。
IE8 的使用狀況: IE8 不支援透明背景,所以覆蓋訊息會完全蓋住頁面內容。但若不指定背景色,IE8 竟然不會蓋住整頁,使用者依然可以碰到底下的頁面內容。在 IE6 ~ IE8 那個年代,我們會用帶透明底色的 GIF 為背景圖來達成透明背景。不過我現在懶得為 IE8 做這件事了。

使用說明

首先從 non-jquery-ui 取得 overlayMessage 的程式碼文件 ui/overlay-message.js 。同一目錄下有預先寫好的訊息顯示樣式表 ui/overlay-message.css ,修改樣式表以自訂覆蓋訊息的外觀。

overlayMessage 是一個獨立套件,所以你只需要引入它的程式碼就可以使用。如下所示:

<!DOCTYPE HTML>

<link rel="stylesheet" type="text/css" href="assets/ui/overlay-message.css">
<script src="assets/ui/overlay-message.js"></script>

<script>
window.onload = function(){
    overlayMessage.initial();
    // If you don't care IE8, you could omit this line.
};
</script>

如果你不在乎 IE8 的使用者,可以略去自行呼叫 overlayMessage.initial() 的動作。因為 overlayMessage 自己會做好這件事。而 IE8 環境需要自行呼叫的原因在於 IE8 的事件處理函數的執行順序和現代瀏覽器相反。它會先執行最後一個 window.onload 事件處理函數,然後才執行 overlayMessage 自己安排的初始動作。如果 IE8 環境中,想要在 window.onload 事件處理函數內就調用 overlayMessage.show() 顯示覆蓋訊息的話,就必須先調用 overlayMessage.initial() 。現代瀏覽器則可寫可不寫。

除了 initial() ,overlayMessage 只有兩個使用方法, show()off()

show


overlayMessage.show(message, options)

顯示全頁覆蓋訊息。訊息內容是 message 。訊息內容的 CSS 樣式名稱預設為 overlay-message 。但也可以在 options 參數表中,以關鍵字 overlay-message 指定使用別的 CSS 樣式。

options 參數表可用項目:

  • overlay-message: 指定訊息內容的 CSS 樣式名稱。預設 “overlay-message”。
  • close-button: 是否顯示關閉按鈕。 truefalse 或者指定的關閉按鈕符號。預設 false ,不使用。常用於代表關閉符號的文字有 ‘❌’, ‘✖’, ‘ⓧ’, ‘╳’, ‘⛒’, ‘✘’, ‘❎’ 等。

注意,這不是當全頁廣告用的 UI 。基於設計目的,應在非同步工作完成後,由程式關閉覆蓋訊息。所以預設不顯示關閉按鈕,不讓使用者自己關閉。除非你要把覆蓋訊息當成 alert() 的替代品來用,才使用關閉按鈕。

在關閉覆蓋訊息前,仍然可以再次呼叫 overlayMessage.show() 。新的訊息內容將取代舊的訊息。

程式範例如下:

overlayMessage.show('傳送資料中,請等待...');

overlayMessage.show('傳送資料中,請等待...', {'close-button': true});

overlayMessage.show('傳送資料中,請等待...', {
    'overlay-message': 'my-message',
    'close-button': '✘'
});

off


overlayMessage.off()

關閉全頁覆蓋訊息。

使用範例

non-jquery-ui 源碼的 sample 目錄下有一份 overlay-message.html 使用範例。這個範例頁面會在開啟時,就顯示覆蓋訊息提示使用者等待三秒。這是模擬頁面載入時,還在等待 Ajax 從服務端取回頁面所需資料的狀況。在覆蓋訊息存在期間,使用者不能操作頁面上的按鈕及文字輸入框。

overlayMessage 範例 - 載入頁面時就出現

當頁面程式關閉覆蓋訊息後,可以點擊頁面上的兩個按鈕 ‘Default button’ 或 ‘Custom button’,顯示帶有右上角關閉按鈕的覆蓋訊息。

overlayMessage 範例 - 帶有關閉按鈕的覆蓋訊息

當覆蓋訊息出現時,頁面上的時鐘仍然持續更新,表示各事件函數依然在工作。因為 overlayMessage 不會擱置其他背景工作。而 window.alert() 則會擱置背景工作 (worker不受影嚮)。所以不希望影響背景工作的時候,你可以用 overlayMessage 取代 window.alert()