10 Jul

Top 7 Modal Dialog Boxes Using Javascript (Comparison)

Posted in Dialogs, Images, Javascript, Multimedia Leave a reply »

Modal boxes are dialogs that float overtop of a web page without having to open a new browser tab or window. Modal boxes are usually a combination of javascript and css. These boxes are especially useful for displaying a full size image preview, multimedia content, contact forms or alert boxes.

There are some great modal box libraries are available for you to choose from. Below is a list of the best ones.

1. LightBox

lightbox

LightBox is a simple, unobtrusive script used to overlay images on the current page.

Requirements:

Prototype Framework and Scriptaculous Effects Library

Tested in:

IE 6+, Firefox 2+, Safari, Opera and Chrome

Features:

Group related images and navigate through them with ease
Fancy & smooth transitions

Supported Content:

Images Only

Website: http://www.lokeshdhakar.com/projects/lightbox2/

2. FancyBox

fancybox

FancyBox is a mac style light-weight modal dialog box. It is built using the jQuery library.

Requirements:

jQuery

Tested in:

IE 6+, Firefox 2+, Safari 3, Opera 9+

Features:

Adds a nice drop shadow under the zoomed item
Groups related items and adds navigation (preloads images)
Customizable through settings and CSS
Support fancy transitions

Supported Content:

Images
HTML content
Multimedia

Website: http://fancy.klade.lv/

3. ThickBox

thickbox

ThickBox is very similar to LightBox. The only difference is that it supports a wide variety of content instead of just images.

Requirements:

jQuery

Tested in:

Firefox 2.0.0.6+, IE 6/7, Safari 2.0.4+, Opera 9.0+

Features:

Images bigger than the browser window are resized.
Remains centered in the window even when the user scrolls the page or changes the size of the browser window.
ThickBox can be invoked from a link element, input element (typically a button), and the area element (image maps).

Supported Content:

Single image
Multiple images
Inline content
Iframed content
AJAX content

Website: http://jquery.com/demo/thickbox/

4. MultiBox

multibox

MultiBox is another library very similar to LightBox, but it supports images, flash, video, mp3s, html.

Requirements:

MooTools

Tested in:

Firefox 2, IE 6/7, Safari

Features:

Supports a range of multimedia formats
Auto detects formats or you can specify the format, useful if your passing a querystring!
Html descriptions

Supported Content:

Images
Video (flv, mov, wmv or real player format)
MP3
HTML content (ajax supported)

Website: http://www.phatfusion.net/multibox/

5. ShadowBox

shadowbox

Shadowbox is an online media viewer application that supports all of the web’s most popular media publishing formats.

Requirements:

Standalone – No library required!

Tested in:

Firefox 1.5+, IE 6+, Opera 9+, Safari 2+ and Chrome 1+

Features:

Supports a host of options that make it highly configurable
Supports multiple languages
Shadowbox supports client-side image maps through the use of area tags. This is a unique feature and lets you show just part of an image in the modal box.

Supported Content:

Images
Videos
HTML
Google Maps
External Webpages

Website: http://www.shadowbox-js.com/

6. LightWindow

lightwindow

LightWindow is another modal box library that is inspired by LightBox, but offers a wide variety of supported content. It looks a lot more polished and highly customizable.