http://www.jacklmoore.com/colorbox/
http://www.jacklmoore.com/colorbox/example5/

 <script type="text/javascript" charset="utf-8">
$(document).ready(function() {
/* Automatically resize to content */
var y = $(document.body).height();
var x = $(document).width();
parent.$.colorbox.resize({innerWidth:x, innerHeight:y}); $("#button_cancel").click(function() {
parent.$.colorbox.close();//注:塗聚文
return false;
})
}); </script> <button id="button_cancel" type="button">cancel</button>
 <script language="javascript" type="text/javascript">
$(document).ready(function(){
$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
$(".iframe").colorbox({
onOpen:function(){ alert('onOpen: colorbox is about to open'); },
onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); }
onClosed:function(){ alert('關閉窗口'); window.location='Index.aspx';} //關閉時的狀態//注:塗聚文
}); $(".callbacks").colorbox({
onOpen:function(){ alert('onOpen: colorbox is about to open'); },
onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
onClosed:function(){ alert('onClosed: colorbox has completely closed'); } //關閉時的狀態
}); $("#click").click(function(){
$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
return false;
}); }); </script>

Colorbox - a jQuery lightbox的更多相关文章

  1. 经典弹出层Colorbox - a jQuery lightbox

    Colorbox - a jQuery lightbox A lightweight customizable lightbox plugin for jQuery Fork me on GitHub ...

  2. 20款美化网站的 jQuery Lightbox 灯箱插件

    jQuery Lightbox 灯箱插件可以让你为您的网站和应用程序展示优雅的图像,视频 和其它内容(使用模式窗口).如果你是一个开发人员,你必须拥有 jQuery 灯箱插件集合,因为有一部分的客户会 ...

  3. jQuery Lightbox图片放大预览

    简介:jQuery Lightbox图片放大预览代码是一款可以在用户点击页面中的小图片时,将该图片的高清版本以Lightbox的方式放大显示在页面的中间,提高用户的体验度. 效果展示 http://h ...

  4. 推荐15款响应式的 jQuery Lightbox 插件

    利用现代 Web 技术,网络变得越来越轻巧与.模态框是突出展现内容的重要形式,能够让用户聚焦到重要的内容上去.在这个列表中,我们编制了15款响应式的 jQuery 灯箱库,这将有助于开发人员创建和设计 ...

  5. Chocolat.js – 响应式的 jQuery Lightbox 插件

    Chocolat.js 使您能够显示一个或多个图像在同一页面上.给用户展示一组图片缩略图,可以显示全页或块.Chocolat.js 可以很好地处理所有主要的浏览器.它在下面这些浏览器测试通过:IE7+ ...

  6. FancyBox - 经典的 jQuery Lightbox 插件

    FancyBox 是一款非常优秀的弹窗插件,能够为图片.HTML 内容和其它任务的多媒体内容提供优雅的弹出缩放效果.作为是最流行的 Lightbox 插件之一,可以通过 fitToView 实现自适应 ...

  7. jquery插件jquery.LightBox.js之点击放大图片并左右点击切换图片(仿相册插件)

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果,您可以根据自己的实 ...

  8. 一款经典的 jQuery Lightbox 灯箱效果

    一个灯箱效果的图片展示插件. 版本: jQuery v1.2.3+ jQuery Lightbox v2.7.1 github 实例预览 使用方法 载入 CSS 文件 <link rel=&qu ...

  9. 6款 jQuery Lightbox图片查看触控插件

    偶然间在网上看到的几个图片预览的插件,挺好用的,顺手整理下来. 1:Zoomify – jQuery缩放效果lightbox插件 地址:http://www.dowebok.com/214.html ...

随机推荐

  1. Spring AOP(面向切面编程)

    一.AOP简介 1.AOP概念:Aspect Oriented Programming 面向切面编程 2.作用:本质上来说是一种简化代码的方式 继承机制 封装方法 动态代理 …… 3.情景举例 ①数学 ...

  2. 关于“java.lang.OutOfMemoryError : unable to create new native Thread”的报错问题

    好吧 我发誓这是postgresql的Mirroring Controller的RT测试的最后一个坑了. 在这个RT测试的最后,要求测试Mirroring Controller功能在长时间运行下的稳定 ...

  3. nandflash之基本特性

    nandflash作为嵌入式中的”磁盘”, 被广泛的应用, 以(K9F2G08U0B)为例,其他型号都差不多 nandflash的结构 nandflash的结构有页(page), block(块)的概 ...

  4. CBoard 看板参数管理

    看板设计采用简单Row+Column布局模式,每行总长度为12,每列对应一个图表,行高度可以调节,列高度集成行高 左边栏看板分类中,我的看板为当前用户创建的看板,普通看板分类通过分类管理维护,保存看板 ...

  5. <转> django模板语言filter方法

    Django的模板是一个简单的文本文件,它可以生成任何文本格式(HTML.XML.CSV等),在本文开始之前先看一个Django模板的例子: 从这个例子中可以看到,模板标签可以是单独出现的,如exte ...

  6. CentOS 7 基础网络管理

    网络服务管理 network服务是对整个计算机网络服务的控制,也可以理解为控制所有网卡. [root@localhost ~]# systemctl start network //开启网络服务 [r ...

  7. Apache 去掉 www

    1 用phpstudy的网友打开“其他选项菜单”- “配置文件”-httpd-conf.找到 #LoadModule rewrite_module modules/mod_rewrite.so 把这一 ...

  8. webpack 4.0 安装出现的小问题 (One CLI for webpack must be installed)

    安装的webpack版本是4.11.0,运行命令npm start 提示:One CLI for webpack must be installed. These are recommended ch ...

  9. Counting Divisors HDU - 6069

    设n=p_1^{c_1}p_2^{c_2}...p_m^{c_m}n=p​1​c​1​​​​p​2​c​2​​​​...p​m​c​m​​​​,则d(n^k)=(kc_1+1)(kc_2+1)...( ...

  10. js去掉浏览器右键点击默认事件(+vue项目开启右键行为)

    js去掉浏览器右键点击默认事件 1.阻止整个页面所有的右击事件 document.oncontextmenu = function(){ return false;} 2.特定的区域/元素 docum ...