# 介紹幾套關於 Box Window 的 jQuery Plugins

我不知道怎麼描述今天的主題，總之就是讓頁面中央顯示一個 Window 視窗 ( 不是開新視窗 )，而是讓一個方塊(Box)顯示在頁面中央，並且讓方塊以外的區域都變的暗暗的，讓視覺焦點專注在那個方塊視窗中，如下圖例：

![ThickBox Window](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/5f292b43caec2fcfa870-image_3.png)

使用這樣的效果有許多好處，例如不用設計太多額外頁面，並且可透過 jQuery 動態載入內容，不但節省頻寬、增加使用性(Usability)、減少套版時間與複雜度、....等等。

在實務上，我曾經用過與我身邊的朋友曾經用過許多類似功能的 jQuery Plug-ins，今天我整理介紹 3 套較多人使用的 Box Window 套件，這幾套都是 jQuery-based 的外掛套件，都還蠻好用的。

**ThickBox**

-   網址：[https://codylindley.com/thickbox/](https://codylindley.com/thickbox/ "http://jquery.com/demo/thickbox/")
-   特色：

-   支援顯示的內容包括 images, iframed content, inline content, 與 AJAX content
-   在 IE 6 下可自動隱藏 Form 元素 ( 你應該知道 <select> 元素會蓋住所有 layer 這件事 )
-   視窗會永遠顯示在畫面正中央，包括你捲動視窗或調整視窗大小
-   視窗可透過**超連結**、**表單元素(如: 按鈕)**、**影像地圖**(ImageMap) 啟動

**FancyBox - fancy image zooming tool**

-   網址：[https://fancyapps.com/fancybox/](https://fancyapps.com/fancybox/ "http://fancy.klade.lv/")
-   特色：

-   適用於瀏覽單張或多張圖片
-   有比 ThickBox 漂亮的預設畫面與過場效果(transitions) => 他已經自稱 **Fancy**Box 了 ^^
-   可直接喚起 圖片 (images)、div ( inline content ) 或 url ( 透過 iframe 載入網頁 )

**jQuery lightBox plugin**

-   網址：http://leandrovieira.com/projects/jquery/lightbox/
-   特色：

-   從知名的 [Lightbox2](https://lokeshdhakar.com/projects/lightbox2/) 改成 jQuery Plug-in 版本
-   只適合用來瀏覽或放大**圖片**用
-   過場效果(transitions)也不錯用
-   可透過鍵盤的左右鍵控制顯示上一張或下一張圖片