AJAX设计模式之Lightbox---图片和网页外、连 flash、影片都可以显示在 Lightbox 弹出的方框里面

原创 2007年10月03日 11:51:00
==========================================================
什么是Lightbox?看了下面的例子你就会明白:

http://www.cnbruce.com/test/lightbox/

以下文章为引用:

Lightbox的效果类似于WinXP操作系统的注销/关机对话框,除去屏幕中心位置的对话框,其他的区域都以淡出的效果逐渐变为银灰色以增加对比度,此时除了对话框内的表单控件,没有其他区域可以获取焦点。 

Lightbox的作用则相当于从前只在IE中被支持的"Modal Dialog";现在在FireFox也可用window.open(url, name, " modal=yes ");

来实现同样的效果。使用"Modal Dialog"将限制用户的操作于弹出的对话框中,只有完成设定好的操作后方才关闭。在一些逻辑敏感的应用中强制吸引用户的注意力以防止用户的误操作导致程序逻辑淆乱。 

其实 Lightbox 并不新鲜,在前年Ajax未诞生之前,它是以 "Inline Popup"的名号出现的。诞生的原因是因为屏蔽弹出窗口的技术纷纷被浏览器采用,而浏览器厂商间也没有一个统一的 Popup 解决方案。当时我记得还有一些说"Inline Popup"破解了弹出窗口屏蔽的报道。 

"Inline Popup" 并不被很多人关注,不过我还是发现国内的163信箱去年改版推出的时候大量使用了此效果。Ajax 名正言顺之时,"Inline Popup"也重装再现了,并换了一个有美感的名字 "Lightbox"。 

第一次使用WinXP的时候,关机时的阴暗渐变效果让我颇为惊艳。利用Lightbox引导用户的注意力完成预先设定的操作,良好的对比度效果营造温和的视觉氛围。相信在当前交互界面日益接近桌面的Web应用中,Lightbox 也将会成为Ajax的重要设计模式之一。

使用方法: 
http://www.huddletogether.com/projects/lightbox2/

==========================================================



Lightbox JS
典型也是最常见的一个,目前2.0 版,不过似乎只能显示图片而已。

ThickBox
这个也是很常见,可以显示图片、网页,并且可指定方框的大小,推荐。

Greased Lightbox
提供装在浏览器的扩充套件,平常看图片时就会有 Lightbox 效果。

GreyBox
这个就厉害了,除了可以用于图片和网页外、连 flash、影片都可以显示在 Lightbox 弹出的方框里面。

Lightbox Gone Wild!
也是可以显示网页、图片,效果还不错。  

Lightbox弹出层图片放大插件

Lightbox弹出层图片放大插件,支持上一张下一张和显示图片标题的功能。使用非常方便,点击缩略图,就会出现加载动画,加载完毕,即可显示大图,如果设置了上一张下一张,鼠标移动到图片上,就会显示按钮。点...
  • gwl216
  • gwl216
  • 2015年02月10日 15:34
  • 1533

FLASH中影片剪辑和图形元件的区别与特点

区别:(1)影片剪辑的播放完全独立于时间轴。即使主场景中只有一个帧,也不会影响影片影片剪辑的播放。但是图形元件就不同了——如果主场景中只有一个帧,那么其中的图形元件也只能永远显示一个帧。(2)影片剪辑...
  • an129
  • an129
  • 2010年05月09日 21:10
  • 2253

JS插件开发之LightBox图片画廊

工程目录结构图: lightBox.js封装了写好的插件,直接导入即可,这里就不在详细解释代码了,主要介绍一下怎么运用该插件,下载地址:http://download.csdn.net/deta...
  • u012612399
  • u012612399
  • 2015年12月23日 13:59
  • 1151

Jquery图片弹出框插件-jQuery lightBox

插件信息 官网:http://leandrovieira.com/projects/jquery/lightbox Demo:http://leandrovieira.com/projects/jqu...
  • Truong
  • Truong
  • 2014年03月29日 11:47
  • 6313

漂亮的LightBox图片画廊插件开发

今天给大家带来的是LightBox图片画廊插件的实现方法,用jQuery制作出一款简洁、漂亮的图片画廊,下面我们先看一下实现的效果: 这是我们最终实现的效果图,点击小图片之后弹出的对应的大图,中间...
  • qq_35718410
  • qq_35718410
  • 2016年08月10日 16:53
  • 535

llightbox使用 (图片放大效果)

家族相册                                                                                   ...
  • Islandww
  • Islandww
  • 2017年06月04日 21:50
  • 350

lightbox弹出窗口插件-弹出广告-兼容IE8和Chrome浏览器

lightbox弹出窗口插件-弹出广告 兼容IE8和Chrome浏览器 /*只弹出图片,没有链接*/ jQuery(document).ready(function($){ ...
  • zyytaiyame
  • zyytaiyame
  • 2017年01月04日 13:55
  • 1167

怎么在FLASH的场景中控制影片剪辑的播放和停止

怎么在FLASH的场景中控制影片剪辑的播放和停止 悬赏分:5 - 提问时间2008-4-9 13:27 问题为何被关闭 主要是想问FLASH中的影片剪辑的停止我做了多个影片然后又做了一些按钮,每个按钮...
  • hbqjzx
  • hbqjzx
  • 2010年03月29日 15:04
  • 11324

使lightbox2 的弹出的大图片自动适应屏幕大小

Resize the image to the screen: lightbox.js: preloader.onload = function() { $image.attr('src...
  • binbin1129
  • binbin1129
  • 2013年03月30日 14:53
  • 2225

如何使用Lightbox效果

步骤 1 - 安装 1、Lightbox v2.0 使用 Prototype 框架和 Scriptaculous 效果库. 你将需要外调这三个 Javascript 文件在你的 header.  2、...
  • chinmo
  • chinmo
  • 2008年03月16日 11:22
  • 1469
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:AJAX设计模式之Lightbox---图片和网页外、连 flash、影片都可以显示在 Lightbox 弹出的方框里面
举报原因:
原因补充:

(最多只允许输入30个字)