Custom JavaScript Dialog Boxes | JavaScriptSource

Custom JavaScript Dialog Boxes

Michael Leigeber Feb 25, 2009

General

A lightweight JavaScript dialog box library. The script offers four dialog styles: alerts, warnings, prompts and success. The DIVs are dynamically added to the DOM when the function is called. Easy to implement.


Click for demonstration page

Notes

The function relies on a content wrapper to calculate the page height. 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. Additional styles can easily be added by adding 2 lines of CSS.

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: dialog_box.js


CSS

Paste this code into your external CSS file or in the <style> section within the HEAD section of your HTML document.


Head

Paste this code into the HEAD section of your HTML document.


Body

Paste this code into the BODY section of your HTML document


Other

Download the images using the URL below:

Leave a Response

(0 comments)