Colorbox - a jQuery lightbox

简介:   http://www.jacklmoore.com/colorbox/http://www.jacklmoore.com/colorbox/example5/ <script type="text/javascript" charset="utf-8"> $(document).ready(function() { /* Automatically resize

 

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> 


 

目录
相关文章
|
JavaScript 前端开发 Android开发
支持移动触摸的jQuery图片Lightbox插件
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/w178191520/article/details/84180718 简介 这是一款支持移动触摸设备的简洁jQuery图片Lightbox插件。
872 0
|
Web App开发 移动开发 JavaScript
推荐15款响应式的 jQuery Lightbox 插件
  利用现代 Web 技术,网络变得越来越轻巧与。模态框是突出展现内容的重要形式,能够让用户聚焦到重要的内容上去。在这个列表中,我们编制了15款响应式的 jQuery 灯箱库,这将有助于开发人员创建和设计美观的网站。
1588 0
|
Web App开发 移动开发 JavaScript
Chocolat.js – 响应式的 jQuery Lightbox 插件
  Chocolat.js 使您能够显示一个或多个图像在同一页面上。给用户展示一组图片缩略图,可以显示全页或块。Chocolat.js 可以很好地处理所有主要的浏览器。它在下面这些浏览器测试通过:IE7+,火狐,Chrome,Opera 和 Safari 浏览器。
1058 0
|
Web App开发 移动开发 JavaScript
20款美化网站的 jQuery Lightbox 灯箱插件
  jQuery Lightbox 灯箱插件可以让你为您的网站和应用程序展示优雅的图像,视频 和其它内容(使用模式窗口)。如果你是一个开发人员,你必须拥有 jQuery 灯箱插件集合,因为有一部分的客户会要求他们的网站看起来更有吸引力和视觉冲击力。
1684 0
|
JavaScript 前端开发 HTML5
FancyBox - 经典的 jQuery Lightbox 插件
  FancyBox 是一款非常优秀的弹窗插件,能够为图片、HTML 内容和其它任务的多媒体内容提供优雅的弹出缩放效果。作为是最流行的 Lightbox 插件之一,可以通过 fitToView 实现自适应功能。
943 0
|
JavaScript 前端开发 数据可视化
Magnific Popup – 免费的响应式 jQuery Lightbox 插件
  Magnific Popup 是一款免费的响应式 jQuery Lightbox 插件,相比其它五花八门的 Lightbox 插件,Magnific Popup 专注于性能和为用户在不同的设备上提供最好的体验,兼容 Zepto.js。
1029 0
|
Web App开发 JavaScript 前端开发
Swipebox – 用于触屏设备的精美 jQuery Lightbox 插件
  Swipebox 是一款可触摸的 jQuery 灯箱效果插件,可用于桌面,移动和平板电脑。它移动设备支持滑动手势导航,桌面电脑上可以用键盘导航,不支持 CSS3 过渡特性的浏览器使用 jQuery 降级处理,支持视网膜显示,能够通过 CSS 轻松定制。
968 0
|
JavaScript
分享30个最佳 jQuery Lightbox 效果插件
Lightbox 应该是最流行的图片浏览效果了,常具有功能包括:自动根据窗口的大小缩放图片,模式窗口,幻灯片方式播放,内容预加载,渐变等效果。Web开发者们模仿 Lightbox 开发了各种各样的图片浏览插件,有基于 jQuery 的,有基于 Prototype 的,也有使用原生 JavaScript 写的。
1086 0
|
Web App开发 JavaScript 前端开发
分享30个最佳 jQuery Lightbox 效果插件
您可能还喜欢   60款很酷的 jQuery 幻灯片演示和下载 Web开发者必备的20款超赞jQuery插件 提升你网站水平的 jQuery 插件推荐 12个很棒的学习 jQuery 的网站推荐 分享27款非常棒的 jQuery 表单插件     Lightbox 应该是最流行的图片浏览效果了,常具有功能包括:自动根据窗口的大小缩放图片,模式窗口,幻灯片方式播放,内容预加载,渐变等效果。
1082 0