Page-Details : Custom JavaScript Dialog Boxes / The JavaScript Source

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

Created by: Michael Leigeber
Web Site: http://www.leigeber.com/
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

/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Michael Leigeber | http://www.leigeber.com/ */

// global variables //
var TIMER = 5;
var SPEED = 10;
var WRAPPER = 'content';

// calculate the current window width //
function pageWidth() {
  return window.innerWidth != null ? window.innerWidth : document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body != null ? document.body.clientWidth : null;
}

// calculate the current window height //
function pageHeight() {
  return window.innerHeight != null? window.innerHeight : document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body != null? document.body.clientHeight : null;
}

// calculate the current window vertical offset //
function topPosition() {
  return typeof window.pageYOffset != 'undefined' ? window.pageYOffset : document.documentElement && document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ? document.body.scrollTop : 0;
}

// calculate the position starting at the left of the window //
function leftPosition() {
  return typeof window.pageXOffset != 'undefined' ? window.pageXOffset : document.documentElement && document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ? document.body.scrollLeft : 0;
}

// build/show the dialog box, populate the data and call the fadeDialog function //
function showDialog(title,message,type,autohide) {
  if(!type) {
    type = 'error';
  }
  var dialog;
  var dialogheader;
  var dialogclose;
  var dialogtitle;
  var dialogcontent;
  var dialogmask;
  if(!document.getElementById('dialog')) {
    dialog = document.createElement('div');
    dialog.id = 'dialog';
    dialogheader = document.createElement('div');
    dialogheader.id = 'dialog-header';
    dialogtitle = document.createElement('div');
    dialogtitle.id = 'dialog-title';
    dialogclose = document.createElement('div');
    dialogclose.id = 'dialog-close'
    dialogcontent = document.createElement('div');
    dialogcontent.id = 'dialog-content';
    dialogmask = document.createElement('div');
    dialogmask.id = 'dialog-mask';
    document.body.appendChild(dialogmask);
    document.body.appendChild(dialog);
    dialog.appendChild(dialogheader);
    dialogheader.appendChild(dialogtitle);
    dialogheader.appendChild(dialogclose);
    dialog.appendChild(dialogcontent);;
    dialogclose.setAttribute('onclick','hideDialog()');
    dialogclose.onclick = hideDialog;
  } else {
    dialog = document.getElementById('dialog');
    dialogheader = document.getElementById('dialog-header');
    dialogtitle = document.getElementById('dialog-title');
    dialogclose = document.getElementById('dialog-close');
    dialogcontent = document.getElementById('dialog-content');
    dialogmask = document.getElementById('dialog-mask');
    dialogmask.style.visibility = "visible";
    dialog.style.visibility = "visible";
  }
  dialog.style.opacity = .00;
  dialog.style.filter = 'alpha(opacity=0)';
  dialog.alpha = 0;
  var width = pageWidth();
  var height = pageHeight();
  var left = leftPosition();
  var top = topPosition();
  var dialogwidth = dialog.offsetWidth;
  var dialogheight = dialog.offsetHeight;
  var topposition = top + (height / 3) - (dialogheight / 2);
  var leftposition = left + (width / 2) - (dialogwidth / 2);
  dialog.style.top = topposition + "px";
  dialog.style.left = leftposition + "px";
  dialogheader.className = type + "header";
  dialogtitle.innerHTML = title;
  dialogcontent.className = type;
  dialogcontent.innerHTML = message;
  var content = document.getElementById(WRAPPER);
  dialogmask.style.height = content.offsetHeight + 'px';
  dialog.timer = setInterval("fadeDialog(1)", TIMER);
  if(autohide) {
    dialogclose.style.visibility = "hidden";
    window.setTimeout("hideDialog()", (autohide * 1000));
  } else {
    dialogclose.style.visibility = "visible";
  }
}

// hide the dialog box //
function hideDialog() {
  var dialog = document.getElementById('dialog');
  clearInterval(dialog.timer);
  dialog.timer = setInterval("fadeDialog(0)", TIMER);
}

// fade-in the dialog box //
function fadeDialog(flag) {
  if(flag == null) {
    flag = 1;
  }
  var dialog = document.getElementById('dialog');
  var value;
  if(flag == 1) {
    value = dialog.alpha + SPEED;
  } else {
    value = dialog.alpha - SPEED;
  }
  dialog.alpha = value;
  dialog.style.opacity = (value / 100);
  dialog.style.filter = 'alpha(opacity=' + value + ')';
  if(value >= 99) {
    clearInterval(dialog.timer);
    dialog.timer = null;
  } else if(value <= 1) {
    dialog.style.visibility = "hidden";
    document.getElementById('dialog-mask').style.visibility = "hidden";
    clearInterval(dialog.timer);
  }
}

CSS

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

#content {padding:20px}
#dialog {position:absolute; width:425px; padding:10px; z-index:200; background:#fff}
#dialog-header {display:block; position:relative; width:411px; padding:3px 6px 7px; height:14px; font-size:14px; font-weight:bold}
#dialog-title {float:left}
#dialog-close {float:right; cursor:pointer; margin:3px 3px 0 0; height:11px; width:11px; background:url(images/dialog_close.gif) no-repeat}
#dialog-content {display:block; height:160px; padding:6px; color:#666666; font-size:13px}
#dialog-mask {position:absolute; top:0; left:0; min-height:100%; width:100%; background:#FFF; opacity:.75; filter:alpha(opacity=75); z-index:100}
.error {background:#fff url(images/error_bg.jpg) bottom right no-repeat; border:1px solid #924949; border-top:none}
.errorheader {background:url(images/error_header.gif) repeat-x; color:#6f2c2c; border:1px solid #924949; border-bottom:none}
.warning {background:#fff url(images/warning_bg.jpg) bottom right no-repeat; border:1px solid #c5a524; border-top:none}
.warningheader {background:url(images/warning_header.gif) repeat-x; color:#957c17; border:1px solid #c5a524; border-bottom:none}
.success {background:#fff url(images/success_bg.jpg) bottom right no-repeat; border:1px solid #60a174; border-top:none}
.successheader {background:url(images/success_header.gif) repeat-x; color:#3c7f51; border:1px solid #60a174; border-bottom:none}
.prompt {background:#fff url(images/prompt_bg.jpg) bottom right no-repeat; border:1px solid #4f6d81; border-top:none}
.promptheader {background:url(images/prompt_header.gif) repeat-x; color:#355468; border:1px solid #4f6d81; border-bottom:none}

Head

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


<script type="text/javascript" src="dialog_box.js"></script>

Body

Paste this code into the BODY section of your HTML document


<br><br>
<a href="javascript:showDialog('Error','You have encountered a critical error.','error',2);">Error</a> | 
<a href="javascript:showDialog('Warning','You must enter all required information.','warning');">Warning</a> | 
<a href="javascript:showDialog('Success','Your request has been successfully received.','success');">Success</a> | 
<a href="javascript:showDialog('Confirmation','Are you sure you want to delete the entry?','prompt');">Prompt</a>
<br><br>

Other

Download the images using the URL below:

Download the images here

User Comments

Add a comment, suggestion, or correction

Comments feed

Do you write JavaScripts?
If you do, why not submit them to us?
We'll give you credit and a link back to your Web site.

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

CSS

Head

Body

Other

User Comments

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos