ajax彈出層介紹

2022-05-11 17:20:58 字數 1429 閱讀 6257

12種ajax彈出層,他們功能都很強大,能夠給程式設計人員省下寶貴的時間,得到更多的視覺享受.

閒話不多說,直接進入主題吧.

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。

最近的專案中需要做彈出層,是基於iframe的,我做了乙個,效果還是可以,樣式呢還算美觀.可是不怎麼好用,接著我研究了下greybox,什麼叫強大,什麼叫professional,

什麼叫power,什麼叫perfect,就在一瞬間,我都領會到了。

製作彈出層

最近在做乙個公司部落格,頁面上用到了很多彈出層,於是大家就仿照著其他 上的彈出層做了乙個。提示 頁面彈出層樣式 background outdiv outtitle titlelayer closelayer outcontent outbottom outdiv input 頁面彈出層 funct...

Ajax選項卡 隔行換色 彈出遮罩層

引用自 ajax選項卡 隔行換色 彈出遮罩層丨芯晴網頁特效丨csrcode.cn 廠商指導價經銷商 資訊 時間 12.02萬19.18萬 五子棋遊戲高階版原始碼2009 02 15 12.02萬19.18萬 五子棋遊戲高階版原始碼2009 02 15 12.02萬19.18萬 五子棋遊戲高階版原始碼...

layer關閉彈出層,彈出列印

常規的話,下面能夠完成關閉彈出層 var index parent.layer.getframeindex window.name 延遲關閉 解決列印視窗彈不出來的情況 parent.layer.close index 可是當這裡需要關閉的同時彈出列印視窗的時候,就會發現失效了,能關閉,可是列印視窗...