WEB2.0開發之Ajax設計模式之Lightbox

Lightbox 這個詞還真不好翻譯，勉強硬解為"燈籠"。

Lightbox的效果類似于WinXP操作系統的注銷/關機對話框，除去屏幕中心位置的對話框，其他的區域都以淡出的效果逐漸變為銀灰色以增加對比度，此時除了對話框內的表單控件，沒有其他區域可以獲取焦點。

Lightbox的作用則相當于從前只在IE中被支持的"Modal Dialog"；現在在FireFox也可用window.open(url, name, " modal=yes ");

其實 Lightbox 并不新鮮，在前年Ajax未誕生之前，它是以 的名號出現的。誕生的原因是因為屏蔽彈出窗口的技術紛紛被瀏覽器采用，而瀏覽器廠商間也沒有一個統一的 Popup 解決方案。當時我記得還有一些說"Inline Popup"破解了彈出窗口屏蔽的報道。

"Inline Popup" 并不被很多人關注，不過我還是發現國內的163信箱去年改版推出的時候大量使用了此效果。Ajax 名正言順之時，"Inline Popup"也重裝再現了，并換了一個有美感的名字 "Lightbox"。

在今年，Lightbox JS最早被其作者Lokesh Dhakar用來放大顯示圖片覆蓋于當前頁面之上，其是用CSS來定義圖片容器，用一幅半透明的png圖片實現漸變陰暗的效果。使用相當簡單：

1.加載lightbox.js

2. 給圖片鏈接增加一個rel="lightbox"屬性。如：

image #1

受 Lightbox 的啟發，Chris Campbell 認為并決定讓Lightbox Gone Wild!。他引入了Prototype1.4.0，配合CSS與HTML 標簽的class屬性重新實現Lightbox的效果，同時擴展LightBox原來的覆蓋顯示圖片的單純功能，使得可以通過流行的異步Updator技術動態加載表單?？梢匀ンw驗一下他提供的 demo。不過似乎他的實現有一些bug，因為該demo在我的FireFox1.5和IE7beta2上都會導致CPU占用率100%。

alwaysBETA 很快也推出了自己的改進方案。他沒有增加新的功能，但是通過引入微型效果類庫Moo.FX讓Lightbox更漂亮，更容易定制。

第一次使用WinXP的時候，關機時的陰暗漸變效果讓我頗為驚艷。利用Lightbox引導用戶的注意力完成預先設定的操作，良好的對比度效果營造溫和的視覺氛圍。相信在當前交互界面日益接近桌面的Web應用中，Lightbox 也將會成為Ajax的設計模式之一。

此時我發現就其功能和效果而言，"Lightbox"翻譯成"燈籠"似乎也沒那么牽強附會了。

原文轉自：http://www.anti-gravitydesign.com