colorbox加载ajax调用的html页面,jQuery的弹出窗口 ColorBox
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相关推荐
- java弹框刷新原页面_JavaScript:关闭弹出窗口时刷新父窗口
说明: 关闭弹出窗口时刷新父窗口也可以说是关闭子窗口时自动刷新父窗口中的信息,即用户通过window对象的open()方法打开一个新窗口(子窗口),当用 户在该子窗口中进行了数据库操作(如数据添加.修 ...
- jQuery的弹出窗口插件colorbox
支持 照片,照片组,幻灯片,ajax,内联 和 iframe 框架. 通过CSS 控制外观,使用用户可以很容易重新定制外观. 不需要更改 ColorBox 的 javascript 文件就可以重新设定 ...
- 关闭页面代码和弹出窗口,出现确定,取消按钮+执行
关闭当前页面:<a href="javascript:window.opener=null;window.close();">关闭</a>,如果是按钮则: ...
- android调用h5预加载图片,使用HTML5的页面资源预加载(Link prefetch)功能加速你的页面加载速度...
不管是浏览器的开发者还是普通web应用的开发者,他们都在做一个共同的努力:让Web浏览有更快的速度感觉.有很多已知的技术都可以让你的网站速度变得更快:使用CSS sprites,使用图片优化工具,使用 ...
- ajax加载多次很卡,使用JQuery UI选项卡多次加载Ajax内容
嗨 我基本上是通过单独的JQueryUI选项卡中的AJAX调用单个php页面(及其表单).该代码是这样的:使用JQuery UI选项卡多次加载Ajax内容 Home Profile Statistic ...
- php网站首页点击更多时获取数据,jQuery+PHP实现点击按钮加载更多,不刷新页面加载更多数据!附:可用源码+demo...
先上效果: 刚打开页面的时候,只显示部分数据,点击加载更多的时候,就会加载我们预先定义的加载数量显示出来!当数据库里面的所有数据都显示出来,就提示全部加载了! 新建index.php jQuery+p ...
- android动态设置错误页面,Android中替换WebView加载网页失败时的页面
我们用webView去请求一个网页链接的时候,如果请求网页失败或无网络的情况下,它会返回给我们这样一个页面,如下图所示: 上面这个页面就是系统自带的页面,你觉得是不是很丑?反正小编本人觉得非常丑,很难 ...
- html弹出窗口加载别的页面地址,仿layer.open打开新窗口URL,自适应URL页面高度
layer.open打开新窗口URL,不能在弹出窗口的同时根据所打开URL地址页面的大小,弹出的同时自适应窗口大小,所以根据需要自己写了一个,请参考指正. 首先加载jquery 下面是js代码: // ...
- loading页面加载(等待页面加载完毕再隐藏loading页面)
1.设计一个装载Loading页面的div 此处设置的height为100vh,vh单位表示浏览器的可视高度百分比,100vh表示浏览器高度的100%,如果是全屏Loading,则该div需要排在bo ...
- 黄聪:wordpress后台加载ajax.googleapis.com导致打开速度很慢的解决方案
黄聪:wordpress后台加载ajax.googleapis.com导致打开速度很慢的解决方案 参考文章: (1)黄聪:wordpress后台加载ajax.googleapis.com导致打开速度很 ...
最新文章
- Asp.net无刷新调用后台实体类数据并以Json格式返回
- 在ubuntu 中如何保存及播放DVD
- 编程之美-求数组中最长递增子序列(LIS)方法整理
- php和python的选择排序算法,图文讲解选择排序算法的原理及在Python中的实现
- LNMT/LAMT实现动静分离、负载均衡和会话保持
- 关于SQL Server对于表的一些查询
- 绑定下拉菜单的通用方法
- 文件格式的幻数File Format and Magic Number
- 安装ssd后不识别网卡_安装固态硬盘后读不出来,怎么解决?
- CPA十二--我国外币会计报表折算(转载)
- 电商平台中的9种共性推荐策略
- 有哪些业务会用到物理服务器?
- 国际手机号码格式化 和 手机邮箱中间部分用****替换
- 图像识别 常用数据集
- ROS的几个重要概念:节点、消息、主题、服务
- app微信登陆 小程序微信授权登陆
- sprintf()和itoa()的区别
- 区别css单位px、em、rem
- 《用户体验要素》-Jesse James Garrett
- 【机器学习】Unsupervised feature selection by regularized self-representation(RSR)
热门文章
- Unrecognized Windows Sockets error: 10106: create 的解决
- arcgis js for JavaScript 4.X 移动轨迹动画
- python语言包含的错误_Python3十大经典错误及解决办法
- 发送邮件,javax.mail 与 geronimo-javamail_1.4_spec 的jar包冲突
- centos xfs硬盘扩容
- adobenbsp;dreamweavernbsp;cs5序列号不对,…
- [苹果开发者账号]06 转让开发者账号后,开发者年费自动续费问题
- 2020 CCF BDCI小学数学应用题自动解题解题思路
- Ansible 配置Windows Update
- java语言编译系统_请问C语言,JAVA之类的语言编译程序是属于 系统软件 还是 应用软件??...