Custom JavaScript Dialog Boxes

By Michael Leigeber on Feb 25, 2009


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


  • Created by: Michael Leigeber
  • Web Site:
  • Posted: February 25, 2009

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


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


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


Paste this code into the BODY section of your HTML document


Download the images using the URL below:

  • Download the images here


Blog comments powered by Disqus