20+ ways to create javascript modal windows and dialog boxes

Liked that login modal window on Digg ? Want to incorporate something like that in your next project ? Then this article will be helpful for you. Javascript modal dialog boxes/windows can be used in any type of project from your personal website to e-commerce website or to just spice up user interface of your web app. These can significantly improve user experience. Designers seem to like using modal windows more and more, as they provide a quick way to show data without reloading the entire page.

The most common cases where these can be used are :

(1) When you want to draw attention to important information.

(2) When you want some action from user to continue

(3) Showing warning signs

(4) For extra options panel (like login/register panel)

(1) Prototype Window

This is a javascript class based on prototype framework. This class is tested on all modern browsers like Firefox,Internet Explorer, Camino,Safari,Opera. Features of this javascript class are valid HTML/XHTML code, resizable windows.

(2) Simple Modal
Simple Modal is jQuery framework based plugin which can be used to create different types of modal dialog boxes. This plugin is cross browser compatible.

(3) Modalbox
Modalbox is based on Prototype and script.aculo.us frameworks.Modalbox is lightweight (10kb) and produces valid XHTML/CSS code.It uses ajax instead of iframe to load content and is also cross browser compatible( Tested in IE6, IE7, Firefox 1.0, 1.5, 2.0, Safari, Camino, Opera 8 and 9).

(4) Moodalbox
Moodalbox can be used to display remote content using Ajax. It is based on mootools framework.

(5) jqModal
It is plugin for jquery framework to make modal windows and dialog boxes in a web browser. features include multiple modal (including modal in modal) support. jqModal is lightweight(2.9kb), powerful and flexible.

(6) Livepipe UI
Livepipe Ui is a suite of powerful widgets and controls for websites. It is built on prototype javscript framework. Well documentation and highly tested controls are just some of it's features.

(7) Lightwindow
It can be used to display pdf's, flash, quicktime movie files and other types of media files in javascript dialog boxes.It is tested on all modern web browsers.

(8) Submodal
It is a javascript/DHTML modal window solution. It is tested on IE 6+, Firefox 0.9+, Safari, Opera 7+.

(9) Facebox
It is jquery based, facebook style lightbox which can be used to display images,divs or entire pages.

(10) Wingo
A way to make dragable modal boxes.

(11) Highslide
It is a nice clean and powerful photo gallery using javascript modal boxes.

(12) Greybox
Easy to use and setup javascript modal boxes.

(13) Suckerfish Hover Lightbox Redux
A suckerfish dropdown menu containing images effect. A really nice and unique effect.

(14) Interface Elements for jQuery
Interface is a collection of rich interface components which utilizes the lightweight JavaScript library jQuery. With this components you can build rich client web applications and interfaces with the same simplicity as writing JavaScript with jQuery.

(15) Sexy alert box
Sexy alert box can be used to display attractive javascript alerts. Requires jQuery and Mootools.

(16) jQuery Alert Dialogs
A set of methods that provide an inline, customizable way to show JavaScript alerts, confirmations, and prompts.

(17) jQuery Block UI
The jQuery Block UI Plugin lets you simulate synchronous behavior when using AJAX, without locking the browser. When activated, it will prevent user activity with the page (or part of the page) until it is deactivated.

(18) jQuery Impromtu
jQuery Impromptu is an extention to help provide a more pleasant way to spontaneously prompt a user for input. More or less this is a great replacement for an alert, prompt, and confirm.

(19) nyroModal
nyroModal is a highly customizable modal window plugin for jQuery.

(20) Lightview
Lightview again is a javascript based modal window picture/media gallery with easy to use navigational features.

(21) jGrowl
jGrowl is a jQuery plugin that raises unobtrusive messages within the browser, similar to the way that OS X's Growl Framework works.

(22) Lightbox gone wild
Creating javascript dialog boxes using Lokesh Dhakar’s lightbox.

(23) Lightbox 2
This is good old lightbox that most of us probably already know about.