12個ajax彈出層效果

12個ajax彈出層效果

 

12個ajax彈出層效果js代碼，功能都很強大。

 

Thickbox - 基於 jQuery，支援 AJAX，輕量級的而且比較高效。支援圖片與HTML內容。大小約為 40k，目前還可作為 WordPress 的外掛程式使用。這個js的優點在於與，父級的原頁面捲軸隨滑鼠滾動的時候，彈出的層並不移動，而始終處於瀏覽器的固定位置。

GreyBox - 建立 iframe 的彈出介面，可使用圖片、HTML 及 URL，大小約為 20k。

這個彈出層效果有固定位置與隨父級的捲軸滾動兩種模式。

GreyBox Redux - 基於 jQuery，比 GreyBox 更輕。

這個js的的彈出效果增加了自上而下緩慢滑出的效果。

Lightbox v2.0 - 最初是為了顯示圖片設計的，使用了 prototype 和 sciptaculous，所以有些沉重，但對於圖片來說很好用。

缺點就是彈出層出來後，滾動滑鼠滾輪，父級頁面與彈出內容同事隨著捲軸，只有點擊關閉按鈕才能關閉彈出層，對於彈出圖片較大的時候，使用者體驗方面相對比較不友好，需要移動頁面找到關閉按鈕才行。

Lightbox Gone Wild - modal 強制回應視窗的 lightbox，可使用 html、表單及圖片，也是基於 prototype 的。

這個效果的好處在於，彈出內容是圖片時，點擊圖片本身既可以關閉彈出層，非常方便。

Multi-faceted LIghtbox - 又一個基於 prototype 的，不過這個為各種可用於 lightbox 的資料類型提供了選項。

Leightbox - 和 Lightbox Gone Wild 很相似，只是 Leightbox 以 html 方式存放內容，所以可以被搜尋引擎索引到。

除了彈出內容符合seo以外，這個效果的一大特點是，彈出後父級頁面的滾動被禁用，而以彈出層的滾動為主，這樣在彈出的視窗有較多內容時，滾動滑鼠滾輪時，就不會同時滾動父級頁面，而影響正常瀏覽。

xilinus - 使用簡單，基於 prototype，很容易定製，可使用多種內容選項。

Lightbox Plus - 可以自動根據視窗的大小縮放圖片。

Suckerfish Hover Lighbox - 和傳統的 lightbox 不一樣，它在開啟 lightbox 的時候，還可以點擊訪問頁面上的其它元素。

Litebox - 這是 Lightbox 的另一個版本，代碼量減少了，使用了 moo.fx 和 prototype-lite，如果頁面需要減肥的話，可以選擇這個。

LITBox - 使用類寫的 lightbox，所以可以建立多個對象執行個體，並且單獨進行控制。基於 Thickbox。