Understanding Modal window

In user interface design, a modal window (often called modal dialog because the window is almost always used to display a dialog box) 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.

Creating a popup window is reasonably easy if you just want another browser window of a specified size and you don't care if your visitors swap back and forward between the various browser windows. Where it becomes difficult (if not impossible) is where you want the new window to stay in front of the original window and not allow your visitor to interact with the original window until the new window has closed. We call a window that insists on retaining the focus like this a modal window.

Usage

• Drawing attention to vital pieces of information. This use has been criticised as ineffective.
• blocking the application flow until information required to continue is entered. collecting application configuration options in a centralized dialog.
• Warning that the effects of the current action are not reversible. This is a frequent interaction pattern for modal dialogs, but it is also criticised by usability experts as being ineffective for its intended use (protection against errors in destructive actions) and for which better alternatives exist.

Modal Window Apllication Tools

ThickBox

Webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.

TinyBox

TinyBox is an easy to use lightweight JavaScript library for creating modal windows/dialogs in an elegant manner, without using traditional pop-up windows. It can be used to overlay content on the current page (i.e. you can load a page and display it in a box above the current one).

Control.Modal

Control.Modal creates modal windows and lightboxes from any links/anchors elements on your pages. Since it attaches these behaviors to HTML that already has semantic meaning, it will degrade gracefully for browsers that do not support JavaScript, and is search engine friendly. It attaches in one line of code for simple use cases, but is highly customizable and can be used in a variety of edge cases.

MOOdalBox

A modal box (inline popup), used to display remote content loaded using AJAX, web 2.0 style, written for the mootools framework.

Lightbox JS

Lightbox JS 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.

GreyBox