ColorBox是一個基于jQuery 1.3 的輕量級，自定義燈箱插件，功能非常強大，支持圖片，圖片組，ajax，inline和iframed內容，燈箱樣式完全由用戶控制，可自定義CSS樣 式，不需要改寫ColorBox庫文件就能重寫展示效果設置，支持加載預處理提示等等，效果圖如下：

使用實例如下：

一，使用ColorBox燈箱顯示一張圖片和圖片組

(1)js部分

$.fn.colorbox.settings.transition= "fade";

$.fn.colorbox.settings.bgOpacity= "0.9";

$.fn.colorbox.settings.contentCurrent= "image {current} of {total}";

$(".cpModal").colorbox();

transition設置ColorBox燈箱的過渡效果，如上：fade

bgOpacity設置ColorBox燈箱的背景透明度，如上：0.9

contentCurrent設置ColorBox燈箱的當前圖片，如上：image {current} of {total}

(2)HTML部分

單張圖片

圖片組1

圖片組2

圖片組3

二，使用ColorBox燈箱顯示ajax加載HTML頁面

(1)js部分

$("#ajax").colorbox({contentWidth:"300px", contentHeight:"195px"});

contentWidth設置ColorBox燈箱的內容寬度，如上：300px

contentHeight設置ColorBox燈箱的內容高度，如上：195px

(2)HTML部分

Ajax HTML

ajax.html表示加載的html頁面，

三，使用ColorBox燈箱顯示flash頁面效果

(1)js部分

$("#flash").colorbox({contentAjax:"flash.html"});

(2)HTML部分

Flash / Video

四，使用ColorBox燈箱顯示Inline HTML效果

(1)js部分

$("#inline").colorbox({contentWidth:"500px", contentInline:"#inline-content"});

contentInline設置ColorBox燈箱的inline內容

(2)HTML部分

Inline HTML

必優博客

www.biuuu.com

五，使用ColorBox燈箱顯示Iframed框架內容效果

(1)js部分

$("#google").colorbox({contentWidth:"750px", contentHeight:"450px", contentIframe:true});

contentIframe設置ColorBox燈箱的內容是否為框架

(2)HTML部分

Iframed內容

ColorBox燈箱配置如下：

transition'elastic' 表示燈箱過渡效果，可選"elastic" or "fade"

transitionSpeed??? 350 表示燈箱過渡效果展示的速度

initialWidth??? 300 表示燈箱初始化寬度

initialHeight??? 100 表示燈箱初始化高度

contentWidth??? false 表示是否設置一個固定的寬度

contentHeight??? false 表示是否設置一個固定的高度

contentAjax??? false 表示是否是一個ajax加載

contentInline??? false 表示是否是一個inline

contentIframe??? false 表示是否是一個iframe

bgOpacity0.85 表示燈箱的背景透明度

preloading??? true 表示是否預加載

contentCurrent??? '{current} of {total}' 表示燈箱展示的當前圖片和總數

contentPrevious??? 'previous' 表示上一個錨，類似于rel屬性

contentNext??? 'next'??? 表示下一個錨，類似于rel屬性

modalClose??? 'close' 錨文本關閉鏈接，可選Esc或close

jQuery插件ColorBox彩盒使用非常簡單，可實現功能非常多，如彈出新窗口，彈出圖片，彈出框架等等，值得推薦。

介紹內容來自 http://www.biuuu.com/

總結

以上是生活随笔為你收集整理的colorbox加载ajax调用的html页面,jQuery的弹出窗口 ColorBox的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。