Terry.Li-彬

虚其心,可解天下之问;专其心,可治天下之学;静其心,可悟天下之理;恒其心,可成天下之业。

  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  143 随笔 :: 344 文章 :: 130 评论 :: 0 Trackbacks

Modal Dialog and Lightbox are Ajax solutions for displaying the content inside the browser without reloading the whole page. Lightboxes overcome the use of the pop up window to suit on the modern browsers and it is being used everywhere these days.  It is widely used for  displaying of media files, webpages , messages, forms etc in a nice looking overlay.

In this post, I’ll be featuring 30 awesome lightbox and modal dialog boxes that you can use on you web applications.

1. Facebox

Facebox is a jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages. It’s simple to use and easy on the eyes.

facebox是一个jquery为基础的Lightbox,可显示图像,divs,或者远程页面。它的使用很简单。 

下载地址:http://chriswanstrath.com/facebox

2. Lightbox2

Lightbox is a simple, unobtrusive script used to overlay images on the current page. It’s asnap to setup and works on all modern browsers.

3. Fancybox

FancyBox is a tool for displaying images, html content and multi-media in a Mac-style “lightbox” that floats overtop of web page.

4. Colorbox

A light-weight, customizable lightbox plugin for jQuery 1.3 and 1.4. Supports photos, grouping, slideshow, ajax, inline, and iframed content.

ColorBox是一个轻量级,可定制的Lightbox插件,可以在jQuery 1.3 和1.4中使用,ColorBox支持 照片,照片组,幻灯片,ajax,内联 和 iframe 框架。 

下载地址:http://colorpowered.com/colorbox/

5. jQuery Lightbox Plugin

jQuery lightBox plugin is simple, elegant, unobtrusive, no need extra markup and is used to overlay images on the current page through the power and flexibility of jQuery´s selector.

jQuery LightBox plugin是一个简洁优雅的插件,不需额外扩展代码就可以把当前页面上的图片通过一个遮罩显示出来,这主要是通过jQuery强大灵活的选择器来实现的。 

下载地址:http://leandrovieira.com/projects/jquery/lightbox/

6. prettyPhoto

prettyPhoto is a jQuery lightbox clone. Not only does it support images, it also support for videos, flash, YouTube, iframes.

prettyPhoto是jQuery Lightbox的一个“克隆”。实际上它不仅能显示图片,还能显示许多的类型,比如在可能弹出的层窗口中加载视频、Flash动画、一个已布局好的网页、一个框架页等等。 

下载地址:http://www.no-margin-for-errors.com/projects/prettyPhoto-jquery-lightbox-clone/

7. Litebox

Lightweight lightbox which built on moo.fx and prototype.lite.

8. Thickbox

It has more features than lightbox2  like display inline content, iframed content or content served through ajax in a hybrid modal.

9. Slimbox

It was designed to be very small, efficient, standards-friendly, fully customizable, more convenient and 100% compatible with the original Lightbox 2.

10. LightView

Lightview was built to change the way you overlay content on a website that supports multiple media files.

11. jQuery Dialog

Query UI contains dialog component. It can be customized to create your own taste of image preview or gallery.

这是一个 jQuery 的对话框插件,可以根据你的喜好很方便地自行定制对话框。 

下载地址:http://jqueryui.com/demos/dialog/

12. Prototype Window

Prototype window based dialog boxes.

你可以把它用到ASP.NET,Ajax,Java等等所有网页上,可以实现改变窗口大小、最小化、最大化窗口、模型对话框、渐入渐出的渐变效果,支持皮肤等功能。现有的实例包括:模仿MAC OS的对话框,在对话框中打开一个网页,警告框,确认对话框,信息对话框,登录对话框,Ajax对话框等等。 
它的原型基于对话框插件。 

下载地址:http://prototype-window.xilinus.com/samples.html

13. MochaUI

MochaUI is a web applications user interface library built on the Mootools JavaScript framework.

MochaUI 是一个用于开发Web应用的用户界面库,基于Mootools的JavaScript框架。 

下载地址:http://mochaui.com/

14. Boxy

Boxy is a flexible, Facebook-style dialog box for jQuery with support for dragging and size tweening.

Boxy是一个可灵活实现类似Facebook风格对话框的jQuery插件,支持对对话框进行拖拉和改变大小等操作。 

下载地址:http://onehackoranother.com/projects/jquery/boxy/

15. ModalBox

It’s inspired by Mac OS X modal dialogs.

Modalbox可用来增强Web应用中的用户交互,开发它的灵感来自Mac OS X的模块动态对话。 

下载地址:http://www.wildbit.com/labs/modalbox/

16. Shadowbox

Shadowbox is a web-based media viewer application that supports all of the web’s most popular media publishing formats. Shadowbox is written entirely in JavaScript and CSS and is highly customizable.

Shadowbox是一个在线媒体展示应用,支持绝大多数的网络媒体常用格式。Shadowbox完全是基于JavaScript和CSS编写的,高度可定制化。 

下载地址:http://www.shadowbox-js.com/

17. LightWindows

A lightbox solutions that enable you to embed images, video,iFrame, flash and more.

18. SimpleModal

impleModal gives you the flexibility to build whatever you can envision, while shielding you from related cross-browser issues inherent with UI development.

19. jqModal

jqModal is a plugin for jQuery to help you display notices, dialogs, and modal windows in a web browser. It is flexible and tiny, akin to a “Swiss Army Knife”, and makes a great base as a general purpose windowing framework

jqModal是jQuery的一个插件,用来在浏览器中显示通知,对话框和模型窗口。它简直如瑞士军刀一般灵活和小巧,而且它为通用目的窗口框架奠定了基础。 

下载地址:http://dev.iceburg.net/jquery/jqModal/#examples

20. Multibox

It support images,flash, video, mp3 and html and it is built with mootools.

21. Greybox

GreyBox can be used to display websites, images and other content in a beautiful way.

22. Highslide

Highslide JS is an image, media and gallery viewer written in JavaScript. It has a quick and elegant looking.

Highslide是一个用Javascript写的图片影像特效浏览器,外观简洁优雅。 

下载地址:http://highslide.com/

23. Sexybox

Lightbox that display content directly from html.

24. PiroBox

Stylish and modern jquery lightbox.

风格时尚且现代的Lightbox控件,采用jQuery开发。能够根据浏览器窗体大小自动调整展示图片大小。提供向前/向后控制链接。动态加载图片效果。易于定制。 

下载地址:http://www.pirolab.it/pirobox/#howto

25. Super Box

Super Box is a script which allows you display windows with the lightbox effect.

26. CeeBox

It is an overlay popup script that embeds flash video, display images, or show html.

27. NyroModal

Modal box that uses callback animation and a lot more features.

28. imgBox

mgBox is a jQuery plugin that implements a smooth zoom effect on images.

imgBox是一个可以实现图片平滑放大效果的jQuery插件。 

下载地址:http://jqueryglobe.com/labs/imgbox/

29. ClearBox

Clearbox is a professional image and content viewer overlay window.

30. jQuery Tools

jQuery Tools is a collection of most user interface components for modern websites such as lightboxes.

jQuery Tools是一个当前网站开发中最常用的UI组件集合。 

下载地址:http://flowplayer.org/tools/overlay/index.html

Choose the appropriate lightbox or modal box on your website.  Next time your users visit they will be attracted on these modern trend and design for your website.

posted on 2010-11-20 12:12 礼物 阅读(1481) 评论(0)  编辑  收藏 所属分类: javascriptjquery