我不知道怎麼描述今天的主題,總之就是讓頁面中央顯示一個 Window 視窗 ( 不是開新視窗 ),而是讓一個方塊(Box)顯示在頁面中央,並且讓方塊以外的區域都變的暗暗的,讓視覺焦點專注在那個方塊視窗中,如下圖例:
使用這樣的效果有許多好處,例如不用設計太多額外頁面,並且可透過 jQuery 動態載入內容,不但節省頻寬、增加使用性(Usability)、減少套版時間與複雜度、....等等。
在實務上,我曾經用過與我身邊的朋友曾經用過許多類似功能的 jQuery Plug-ins,今天我整理介紹 3 套較多人使用的 Box Window 套件,這幾套都是 jQuery-based 的外掛套件,都還蠻好用的。
ThickBox
- 網址:http://jquery.com/demo/thickbox/
- 特色:
- 支援顯示的內容包括 images, iframed content, inline content, 與 AJAX content
- 在 IE 6 下可自動隱藏 Form 元素 ( 你應該知道 <select> 元素會蓋住所有 layer 這件事 )
- 視窗會永遠顯示在畫面正中央,包括你捲動視窗或調整視窗大小
- 視窗可透過超連結、表單元素(如: 按鈕)、影像地圖(ImageMap) 啟動
FancyBox - fancy image zooming tool
- 網址:http://fancy.klade.lv/
- 特色:
- 適用於瀏覽單張或多張圖片
- 有比 ThickBox 漂亮的預設畫面與過場效果(transitions) => 他已經自稱 FancyBox 了 ^^
- 可直接喚起 圖片 (images)、div ( inline content ) 或 url ( 透過 iframe 載入網頁 )
jQuery lightBox plugin