Posted on October 23, 2007 - by webmaster

Web 2.0 modal window featuring lightbox slimbox thickbox lightwindow and moodalbox

Modal window is is a child window which requires the user to interact with it before they can return to operating the parent application. Modal windows are commonly used in GUI systems to command user awareness and to display emergency states (via wiki).

Why modal? is that standard popup window doesn’t enough? well it is web 2.0 trends where interactivity, focus, and usability is the matter. Displaying popup window/dialog window in new browser window were annoying, and we can’t keep the focus of the visitor in one page, effects? no way. Most of modal window library has used overlays effect, it can take the focus of the visitor eyes to the modal content and also make it looks more elegan.

There are many modal window script library over the internet that you can download and use free of charge, you can choose them to fit the functionality that you need because many of them were made for specific purpose and has special feature, but there are also modalbox script library that was made for multi purposes modal window (dialog box, image popup, content popup, ajax content etc.). Here i listed few modalbox window that i think the best among others.

Lightwindow

Lightwindow is multipurposes modalbox script library which has so many features and can popup anything from simple inline content to a complex form submission. This script library was written by Kevin Miller and used the most influence javascript library prototype and scriptaculous.

What are the cool features?

• Supports EVERY Media type and renders it appropriatly.
• Create your own custom overlays including transparent patterns!
• Galleries [Anything can be a gallery, the only limitation is your theme and markup]
• You can create your own theme including markup/css/animations.
• Automatically detects media and source.
• Submit Forms via the window.

what else? a lot more you can read more features here, download and samples of implementations.

Moodalbox

Moodalbox window written by Răzvan Brateş – Romanian freelance web designer/developer for the mootools framework. It is an multipurposes modal window, can be used to display some help document, an extra options page, a registration form, but it unable load images(To the dedicated plugins that already exist, for modularity’s sake) It’s originally based on the excellent code behind Slimbox.

Slimbox

Slimbox is a 7kb visual clone of the popular Lightbox JS v2.0 by Lokesh Dhakar, written using mootools framework. It was designed to be small, efficient, more convenient and 100% compatible with the original Lightbox v2. Since it is designed as the clone of lighbox (mootools version of lightbox) so its used to overlay images, if you want a multipurposes (inline popup content/ajax page etc.) you may used moodalbox for mootools or lightwindow for prototype+scriptaculous or thickbox if you want to used JQuery.

Lightbox

Lightbox is a simple, unobtrusive script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers, another overlay images script library that using prototype and scriptaculous javascript library.

Thickbox

Just like Lightwindow and Moodalbox, Thickbox is a multi purposes modal window written in JavaScript on top of the outstanding jQuery library. It can handle single image overlays, multiple images overlays, inline content, iframed content, or content served through AJAX in a hybrid modal.

Features of Thickbox

• ThickBox was built using the super lightweight jQuery library. Compressed, the jQuery library is 20k, uncompressed it’s 58k.
• The ThickBox JavaScript code and CSS file only add an additional 15k (only 10k by using the thickbox-compressed.js) on top of the jQuery code. The CSS file could additionally be compressed if need be.
• ThickBox offers versatility (images, iframed content, inline content, and AJAX content).
• ThickBox will hide form elements in Windows IE 6.
• Due to the ThickBox creator’s view that transitions should be tailored by individual authors, ThickBox windows do not implement fancy transitions. Feel free to add them as you see fit. Is this a feature? Well, some might say it is.
• ThickBox can be invoked from a link element, input element (typically a button), and the area element (image maps).

The complete feature lists, documentation and implementation demo can be found in thickbox homepage