I have put together a lightweight (~4.5kb) JavaScript dialog box library. The script currently offers four dialog styles: alerts, warnings, prompts and success. There is nothing to add to your page except references to the JavaScript and CSS if you choose not to incorporate them in your existing files. The Divs are dynamically added to the DOM when the function is called. The function currently relies on a content wrapper to calculate the page height however you could use the body height but the background overlay would only cover the currently visible content. The variable for the wrapper ID as well as the speed and timer settings are available at the top of the JavaScript file. Dialog boxes are generated as follows.

showDialog('Error','You have encountered an error.','error',2);

The first property is the title of the box, the second is the message, the third is the box style (alert, warning, prompt or success) and the fourth is an optional autohide timeout. Set the auto hide to the number of seconds you want to show the dialog before it fades out. The message can take HTML, just be sure and escape when necessary. The “look and feel” can easily be changed through the CSS and additional styles can easily be added by adding 2 lines of CSS.

This script has been tested in all major browsers and is available free of charge for both personal or commercial projects under the creative commons license. Community support is available here. Paid support is also available, contact me for details.

Update 4/23/2008 – Added autohide feature, thanks for the suggestion Chris.
Update 4/23/2008 – Added dynamic vertical positioning, 1/3 way down the current viewable window.
Update 4/25/2008 – Resolved double click issue when closing.
Update 5/21/2008 – Resolved issue when clicking to close the dialog box before the fading animation completes.

View the demo.

Download the source.