ColorBoxjQuery的彈出窗口

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

在線演示：http://runjs.cn/detail/hjor2zox

使用說明
1，jQuery 1.3庫文件
2，colorbox 庫文件
3，燈箱效果CSS樣式文件

使用實(shí)例如下：
一，使用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設(shè)置ColorBox燈箱的過渡效果，如上：fade
bgOpacity設(shè)置ColorBox燈箱的背景透明度，如上：0.9
contentCurrent設(shè)置ColorBox燈箱的當(dāng)前圖片，如上：image {current} of {total}

(2)HTML部分
<p><a class="cpModal" href="marylou.jpg" >單張圖片</a></p>
<p><a class="cpModal" href="biuuu1.jpg" >圖片組1</a></p>
<p><a class="cpModal" href="biuuu2.jpg" >圖片組2</a></p>
<p><a class="cpModal" href="biuuu3.jpg" >圖片組3</a></p>

二，使用ColorBox燈箱顯示ajax加載HTML頁面
(1)js部分
$("#ajax").colorbox({contentWidth:"300px", contentHeight:"195px"});

contentWidth設(shè)置ColorBox燈箱的內(nèi)容寬度，如上：300px
contentHeight設(shè)置ColorBox燈箱的內(nèi)容高度，如上：195px

(2)HTML部分
<p><a id="ajax" href="ajax.html">Ajax HTML</a></p>
ajax.html表示加載的html頁面，

三，使用ColorBox燈箱顯示flash頁面效果
(1)js部分
$("#flash").colorbox({contentAjax:"flash.html"});

(2)HTML部分

<p><a id="flash" >Flash / Video</a></p>
四，使用ColorBox燈箱顯示Inline HTML效果
(1)js部分
$("#inline").colorbox({contentWidth:"500px", contentInline:"#inline-content"});
contentInline設(shè)置ColorBox燈箱的inline內(nèi)容

(2)HTML部分
<p><a id="inline" href="#">Inline HTML</a></p>
<div style="display:none">
<div id="inline-content">
<div style="padding:10px">
<p>必優(yōu)博客</p>
<p>www.biuuu.com</p>
</div>
</div>
</div>
五，使用ColorBox燈箱顯示Iframed框架內(nèi)容效果
(1)js部分
$("#google").colorbox({contentWidth:"750px", contentHeight:"450px", contentIframe:true});

contentIframe設(shè)置ColorBox燈箱的內(nèi)容是否為框架

(2)HTML部分
<p><a id="google" >Iframed內(nèi)容</a></p>

ColorBox燈箱配置如下：
transition 'elastic' 表示燈箱過渡效果，可選"elastic" or "fade"
transitionSpeed    350 表示燈箱過渡效果展示的速度
initialWidth    300 表示燈箱初始化寬度
initialHeight    100 表示燈箱初始化高度
contentWidth    false 表示是否設(shè)置一個(gè)固定的寬度
contentHeight    false 表示是否設(shè)置一個(gè)固定的高度
contentAjax    false 表示是否是一個(gè)ajax加載
contentInline    false 表示是否是一個(gè)inline
contentIframe    false 表示是否是一個(gè)iframe
bgOpacity 0.85 表示燈箱的背景透明度
preloading    true 表示是否預(yù)加載
contentCurrent    '{current} of {total}' 表示燈箱展示的當(dāng)前圖片和總數(shù)
contentPrevious    'previous' 表示上一個(gè)錨，類似于rel屬性
contentNext    'next'    表示下一個(gè)錨，類似于rel屬性
modalClose    'close' 錨文本關(guān)閉鏈接，可選Esc或close

jQuery插件ColorBox彩盒使用非常簡(jiǎn)單，可實(shí)現(xiàn)功能非常多，如彈出新窗口，彈出圖片，彈出框架等等，值得推薦。

介紹內(nèi)容來自 http://www.biuuu.com/