基本介紹
- 軟體名稱：lightbox
- 軟體語言：c
Lightbox的效果類似於WinXP作業系統的註銷/關機對話框，除去螢幕中心位置的對話框，其他的區域都以淡出的效果逐漸變為銀灰色以增加對比度，此時除了對話框內的表單控制項，沒有其他區域可以獲取焦點。
Lightbox的作用則相當於從前只在IE中被支持的"Modal Dialog"；現在在FireFox也可用window.open(url, name, " modal=yes ");
來實現同樣的效果。使用"Modal Dialog"將限制用戶的操作於彈出的對話框中，只有完成設定好的操作後方才關閉。在一些邏輯敏感的套用中強制吸引用戶的注意力以防止用戶的誤操作導致程式邏輯淆亂。
其實 Lightbox 並不新鮮，在前年Ajax未誕生之前，它是以 "Inline Popup"的名號出現的。誕生的原因是因為禁止彈出視窗的技術紛紛被瀏覽器採用，而瀏覽器廠商間也沒有一個統一的 Popup 解決方案。當時我記得還有一些說"Inline Popup"破解了彈出視窗禁止的報導。
"Inline Popup" 並不被很多人關注，不過我還是發現國內的163信箱去年改版推出的時候大量使用了此效果。Ajax 名正言順之時，"Inline Popup"也重裝再現了，並換了一個有美感的名字 "Lightbox"。
在今年，Lightbox JS最早被其作者Lokesh Dhakar用來放大顯示圖片覆蓋於當前頁面之上，其是用CSS來定義圖片容器，用一幅半透明的png圖片實現漸變陰暗的效果。使用相當簡單：
1.載入lightbox.js
2. 給圖片連結增加一個rel="lightbox"屬性。如：
<a href="images/image-1.jpg"rel="lightbox"title="my caption">image #1</a>
受 Lightbox 的啟發，Chris Campbell 認為並決定讓Lightbox Gone Wild!。他引入了Prototype1.4.0，配合CSS與HTML 標籤的class屬性重新實現Lightbox的效果，同時擴展LightBox原來的覆蓋顯示圖片的單純功能，使得可以通過流行的異步Updator技術動態載入表單。可以去體驗一下他提供的 demo。不過似乎他的實現有一些bug，因為該demo在我的FireFox1.5和IE7beta2上都會導致CPU占用率100%。
alwaysBETA 很快也推出了自己的改進方案。他沒有增加新的功能，但是通過引入微型效果類庫Moo.FX讓Lightbox更漂亮，更容易定製。
第一次使用WinXP的時候，關機時的陰暗漸變效果讓我頗為驚艷。利用Lightbox引導用戶的注意力完成預先設定的操作，良好的對比度效果營造溫和的視覺氛圍。相信在當前互動界面日益接近桌面的Web套用中，Lightbox 也將會成為Ajax的設計模式之一。
