jQuery的弹出窗口 ColorBox

MIT
JavaScript
跨平台
2010-01-30
小编辑

ColorBox是一个基于 jQuery 的轻量级,自定义灯箱插件,功能非常强大,支持图片,图片组,ajax,inline和iframed内容,灯箱样式完全由用户控制,可自定义CSS样 式,不需要改写ColorBox库文件就能重写展示效果设置,支持加载预处理提示等等,效果图如下:

在线演示:http://runjs.cn/detail/hjor2zox

使用说明
1,jQuery 1.3库文件
2,colorbox 库文件
3,灯箱效果CSS样式文件

使用实例如下:
一,使用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部分
<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设置ColorBox灯箱的内容宽度,如上:300px
contentHeight设置ColorBox灯箱的内容高度,如上: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" href="http://www.youtube.com/watch?v=lBvaHZIrt0">Flash / Video</a></p>
四,使用ColorBox灯箱显示Inline HTML效果

(1)js部分
$("#inline").colorbox({contentWidth:"500px", contentInline:"#inline-content"});
contentInline设置ColorBox灯箱的inline内容

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

contentIframe设置ColorBox灯箱的内容是否为框架

(2)HTML部分
<p><a id="google" href="http://www.google.com">Iframed内容</a></p>

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
bgOpacity 0.85 表示灯箱的背景透明度
preloading    true 表示是否预加载
contentCurrent    '{current} of {total}' 表示灯箱展示的当前图片和总数
contentPrevious    'previous' 表示上一个锚,类似于rel属性
contentNext    'next'    表示下一个锚,类似于rel属性
modalClose    'close' 锚文本关闭链接,可选Esc或close

jQuery插件ColorBox彩盒使用非常简单,可实现功能非常多,如弹出新窗口,弹出图片,弹出框架等等,值得推荐。

介绍内容来自 http://www.biuuu.com/

加载中

评论(1)

红薯
红薯
@王振威 搞的 ColorBox 的演示,里面很有“料”!!! http://runjs.cn/detail/hjor2zox

Colorbox 1.6.4 发布,jQuery 弹窗组件

Colorbox 1.6.4 发布,该版本修复了使用 inline 属性时如果选择器匹配到多个元素导致重复的目标元素。 ColorBox是一个基于 jQuery 的轻量级,自定义灯箱插件,功能非常强大,支持图片,图片组...

2016/05/13 08:50

ColorBox 1.3.18 发布

ColorBox是一个基于jQuery 1.3 的轻量级,自定义灯箱插件,功能非常强大,支持图片,图片组,ajax,inline和iframed内容,灯箱样式完全由用户控制,可自定义CSS样 式,不需要改写ColorBox库文...

2011/11/23 15:31

没有更多内容

加载失败,请刷新页面

没有更多内容

3
回答
colorbox如何弹出两层

第一个colorbox会弹出一个列表 点击其中一个列表会弹出一个colorbox显示详细信息 但是当我关闭第二个窗口的时候,第一个也关闭了 我引入两个co...

2012/10/25 16:50
4
回答
colorbox弹出层页面点击某按钮关闭弹出层

colorbox弹出层页面有一class为abc的按钮,点击该按钮关闭弹出层

2012/04/03 09:17
1
回答
关于colorbox的登录注册框的cookie问题
山哥 的回答 2012/12/15 23:00
最佳答案
这个比较简单,jquery有一个很好的cookie插件 jQuery.Cookie,开源中国也收录了:http://www.oschina.net/p/cookie 首先你给这个弹窗需要记录的Cookie起一个名称,比如:regTipDialog,然后通过 $.cookie('regTipDi...
2
回答
colorbox拖动问题

@JSON 你好,想跟你请教个问题: 我用你提供的可让colorbox拖动的代码,放入了那里面。 可以不行。 希望请教你一下。 方便的话 。联系我Q 57...

2012/07/05 15:29
9
回答
这个colorbox 如何让它支持拖拽呀

这个colorbox 如何让它支持拖拽呀 是蛮好用,不是不能拖,很纠结。。 哪位有好的办法不?

2011/03/03 19:58
1
回答
colorbox 灯框高度随加载内容高度的增加而自动加长

一个项目中使用了jquery colorbox 灯箱插件,现在遇到的一个问题是 弹出的窗口后,灯箱里面的高度会随内容添加而增加。但是要求不能出现滚动条,希...

2012/08/22 16:51
2
回答
colorbox跟随鼠标滚动

大家好: jquery的 colorbox 是否能跟随鼠标滚动,这个弹出框是否也能一起跟随滚动呢。我没看到有这个属性呢, 谁知道。在线等!!

2012/07/19 14:52
1
回答
ColorBox 升级到1.3.19后显示问题。

ColorBox升级到 1.3.19问题: 在Chrome18、IE9、Firefox 11中都会变成这个样子! 而使用Colorbox 1.3.15则没...

2012/03/31 20:41
1
回答
colorbox怎么实现鼠标移入移出效果?

我想用colorbox实现鼠标移上去时,弹出窗口,移出时弹出窗口关闭, 添加一个链接 <a href="../content/ohoopee3.jpg">...

2011/08/10 17:22

没有更多内容

加载失败,请刷新页面

Colorbox的官方介绍和colorbox的常见问题中文翻译

来自:http://blog.goodtext.org/items/b10.html Colorbox Jquery的一个轻量的,可自定义的 lightbox 插件。 Colorbox的官方介绍和colorbox的常见问题中文翻译 Colorbox Jquery的一个轻量的,...

2012/10/12 14:22
3.3K
0
jQuery Colorbox使用教程

jQuery Colorbox是一款弹出层,内容播放插件,效果极佳,最关键的是大小只有10KB,当然我主要是用来弹出图片啦,(之前介绍过jquery Fancybox插件,个人很喜欢)。jQuery Colorbox不仅有弹性动...

2013/09/05 08:36
205
0
关于一款优秀的Jquery插件-Colorbox的官方用法翻译

关于一款优秀的Jquery插件-Colorbox的官方用法翻译

2014/05/15 16:11
68
0
为什么colorbox要比fancybox强?

1)对于IE6的兼容性 fancybox在ie6中看不到关闭按钮,不要说我不会用,我知道可以去修改脚本或css中的url,但是这个错误根本就是设计者的错误,为什么colorbox没有这个错误!在我的笔记本上i...

2011/03/17 09:57
1K
0
jQuery弹出层插件大全

jQuery弹出层插件大全: 1.thickbox 目前用的比较多的,最新版本是thickbox3.1 下载地址: http://jquery.com/demo/thickbox/#examples 2.colorBox 官方网站:http://colorpowered.com/color...

2011/02/21 16:53
2.2K
0
一些lightbox插件(弹出层)

http://fancybox.net/ http://www.jacklmoore.com/colorbox http://swip.codylindley.com/DOMWindowDemo.html http://www.shadowbox-js.com/index.html http://jquery.com/demo/thickbox/ 合...

2012/05/11 10:00
93
0
SHOPPING MALL OPENCART 自适应主题模板 ABC-0157

SHOPPING MALL OPENCART 自适应主题模板 ABC-0157

2015/08/23 20:00
30
0
SHOPPING MALL OPENCART 自适应主题模板 ABC-0157

SHOPPING MALL OPENCART 自适应主题模板 ABC-0157

2015/04/01 19:31
146
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部