最新消息:新的一年,启动新的宽屏主题模版,关注更多的web前端!

HTML javascript实现模态窗口总结(lightbox,subModal,greybox,thickbox)

代码收集 amason 3499浏览 0评论

首先大概明确下什么是lightbox效果:

 

A script (JavaScript) that allows you to focus the users attention on a particular portion of the screen. It creates the equivalent of a modal dialog box – this means that while the user looks at this focused part of the screen, they can’t interact with the rest of the screen.

 

精简版js 代码不到6K,基于prototype(自带1.4,但大致兼容1.6,无需script.aculo.us库,自然也没什么养眼的特效,这是保持瘦身的 秘诀)。但似乎精简过头了,稍微扩展了下,加入了直接开窗口的方法,并支持窗口页面载入完毕后及窗口关闭后的回调事件,以适合项目使用。

 

待整理。

 

顺便整理下市面上现有 lightbox 作品:

 

Lightbox JS,(作者是Lokesh Dhakar),是所有lightbox效果的始祖版,独立实现(不依赖公共JS库),代码较为松散,但显然他的地位意义不在于他的代码,而是他的“效果”。在这个基础上衍生了很多“衍生版”的lightbox,包括上面所HACK的精简版
最新版本1/19/06,支持键盘快捷键来关闭窗口。

 

Lightbox JS 现在发展到了Lightbox JS v2.0 (中文介绍),基于prototype+script.aculo.us,因此开打窗口时的效果更为平滑、养眼,能根据窗口(图片)大小自动调整显示层的大小。最大的缺点是只支持图片的展示,因此才称为"light box"。要展现其他页面内容,有许多衍生(扩展)版可选,作者推荐 LyteboxThickBox
最新版为:v2.04 Released 3/09/08

 

Litebox,物如其名,是Lightbox JS v2.0 的精简版(但效果完全实现,不多也不少),基于moo.fix (prototype的精简版prototype.lite.js 3KB + mootools的特效库moo.fix.js 3KB),其中lightbox 效果实现代码litebox.js 18KB,全部文件合并压缩后约16KB左右,也可只用moo.fix.js + litebox.js 配合完整的prototype.js 使用。

 

Lytebox 是Lightbox JS v2.0 的衍生版,同样也是基于prototype+script.aculo.us,展示效果也跟Lightbox JS v2.0 完全一样,还可以用iframe展示内容,以便可以展示页面、Flash等更丰富的内容。但JS文件较大,接近40K。
最新版为:October 2, 2007 v3.22

 

GreyBox,22KB,独立实现,JS文件不少,设置也稍嫌麻烦,效果中规中矩。

 

GreyBox Redux,JS文件仅2KB,是GreyBox的jQuery 简单实现版,就是用个iframe来框住外部页,但还依赖最少2个图片+1个CSS文件类配合,只适合特殊场合临时用一下。

 

ThickBox (ThickBox类中的经典作品,中文演示),是基于jQuery的,是作者 Cody Lindley 既不满足Lightbox只能展示图片又不喜欢prototype+script.aculo.us组合的体积,就根据Greybox的功能jQuery实现,而且是被jQuery官方收录的作品。既然能称得上为"thick box",自然功能不弱(该有的都有了),但体积却一点也不thick,仅为12KB,压缩后才6KB,而jQuery自身压缩后可达20K,用jQuery的就爽了。

 

Lightbox Gone Wild,是Lightbox JS的 衍生版,基于prototype,只需两个文件(除prototype.js之外),一个js (6KB,代码有精炼的余地),一个css,只支持用AJAX读取页面内容然后用lightbox效果展示,只是半透明置顶层,无绚丽的动态载入效果,也 无自动缩放,居中也是靠CSS,但视乎很受欢迎(2年来600多个留言,而且还继续增长中。。)

 

Slimbox,大概是基于MooTools 版的最佳实现了,只有6KB,功能却跟Lightbox JS v2.0 完全一样,而且背景淡出效果更为平滑(在线演示),是MooTools 用户的不二选择,而且目前还在活跃更新中。
最新版为:Slimbox 1.62 (Jun 01 2008)for MooTools 1.2

 

Shadowbox.js,(作者Micha
el J. I. Jackson
)则可算是 lightbox 中的战斗机,号称支持市面常见的公共JS库:
    * Yahoo! User Interface Library
    * Ext (standalone)
    * Prototype + Scriptaculous
    * jQuery
    * MooTools (requires Fx.Styles and its dependancies)
    * Dojo Toolkit

 

展示效果基本跟 Lightbox JS v2.0 一样,而且支持外部页面、Flash等多媒体。十分具有开源风范,js代码跟分为源码包(带详细注释)、生产用包(去注释去空格换行等,约31KB,而各 种公共JS库的接口文件不到2KB,但感觉还有使用公共JS库的必要了吗?)

 

prototype-window ,可以看作是旗舰版的thickbox by prototype+script.aculo.us,而且物如其名,已经不再是小打小闹的box级工具,而是完全的模拟窗口实现,窗口特效中的缩放啊、 震动啊,要多牛逼有多牛逼。当然文件size也是旗舰级的(若要用好,必需还得引入一堆theme文件,包括CSS和图片),这也是唯一的缺点,适合“企 业级”需求。

 

到jQuery插件库及WIKI中找了下,发现似乎没有 Lightbox JS v2.0 的纯jQuery 完全实现版(展示效果一样的),只找到近似的(但均只能展示图片):
jQuery Lightbox Plugin (balupton edition) 这个在IE6中打开会挂起,在FF中正常。

 

lightbox by Warren Kewenki (效果细节不到位,如在IE中图片加载前不会自动居中)
Based on Lightbox 2 by Lokesh Dhakar. Originally written to make use of the Prototype framework, and Script.acalo.us, now altered to use jQuery.

 

 其他人的整理:

6种lightbox效果源代码下载(带在线演示)(原文,空间已过期)

各种 lightbox 实现

lightbox效果的最简单实现原理

Which Lightbox is right for you?

 

转载请注明:笑申爱设计|liushen.net » HTML javascript实现模态窗口总结(lightbox,subModal,greybox,thickbox)

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址