Click here to Skip to main content
Click here to Skip to main content
Go to top

Custom Alert Boxes using JavaScript and the DOM

, 24 Aug 2008
Rate this:
Please Sign up or sign in to vote.
Custom alert boxes using JavaScript and the DOM.

Introduction

Alert boxes in JavaScript are notoriously unforgiving when it comes to designing a user interface. You cannot add images, change the background color, or otherwise "theme" the dialog to match the style of your web page or web application. Fortunately, JavaScript in conjunction with the Document Object Model (DOM) is there to help us achieve an otherwise unobtainable goal.

Background

This is my second attempt at creating a JavaScript alert box. My first attempt was a few years ago. The code was buggy and difficult to use, so I put it on the backburner with the intention of doing a complete rewrite. I recently began upgrading the web application that made use of the old code, and decided that it was time to breath life into the old code.

There are a number of similar alert boxes on the web, but most are part of larger projects, or make use of external libraries.

Using the Code

To use the custom alert/dialog boxes, you must add the JavaScript source to your header, as well as the .css files that determine the "skin" the boxes will use.

<link rel="Stylesheet" href="default.css" type="text/css" media="screen" />
<script type="text/javascript" src="DOMAlert.js"></script>

If you fail to include a reference to a stylesheet, the .js file will look for default.css in the local path.

Once you have added your .js and .css files, you can create a new alert box by using the following constructor:

var msg = new DOMAlert(
{
    title: 'Title',
    text: 'Alert Message',
    skin: 'default',
    width: 300,
    height: 300,
    ok: {value: true, text: 'Yes', onclick: showValue},
    cancel: {value: false, text: 'No', onclick: showValue }
});

The constructor takes only one argument, an object containing one or more of the following properties:

  • title: The title of the alert box. Can contain inline HTML, but may not render correctly. Optional. Can be passed in the show() method.
  • text: The text of the alert box. Can contain inline HTML, but may not render correctly. Optional. Can be passed in the show() method.
  • skin: The skin to use for the alert box. Skins/themes are discussed later in this article.
  • width: The width of the alert box. Optional, but recommended.
  • height: The height of the alert box. Optional.
  • ok: An object containing the text of the 'OK' button, the callback to be pressed when that button is clicked (onclick), and the value passed to that callback. The default is to call the close() method of the alert box. Optional, but recommended.
  • cancel: An object containing the text of the 'Cancel' button, the callback to be pressed when that button is clicked, and the value passed to that callback. There is no default.

Methods

The following methods are currently supported:

  • show(): Changes the visible state of the alert box to visible.
  • show(text): Changes the visible state of the alert box, and sets the text of the alert. If using this method, title must be set in the constructor.
  • show(title, text): Changes the visible state of the alert box to visible, and sets both the title and the text of the alert box.
  • hide(): Changes the visible state of the alert box to hidden.
  • close(): Destroys all HTML elements attached to the alert box and unregisters all the onclick callbacks. This does not destroy the object or its methods since they are prototyped.
  • center(): Centers the alert box on the page. Most users shouldn't need to call this, as it is called automatically.

Callback

The callbacks for the OK and Cancel buttons can either be references to an existing function or a closure. For pre-existing functions, two objects are passed as arguments, a reference to the alert box that the OnClick event was generated from, and the value of the button that was clicked.

function showValue(sender, value)
{
    //sender is the alert box that the event was called from
    //value is the value that was passed from the pressed button
}

Skins/Themes

The .js file contains little to no information regarding the design of the alert box, only the layout. Since users may have different requirements in the design on a per alert box basis, and to separate design from code, the design information resides in .css files. If no skin information is provided, the code looks for a 'default.css' file to be located in the current directory. Each CSS name needs to be prefixed with the name of the skin you wish to use. So, if your theme is named 'human' and you are defining the contentArea, then your CSS name needs to be .human_contentArea.

This allows you to include all your skin information in one .css file, or in multiple ones. It's entirely up to you. However, some aspects like position or width may be overwritten in the .js file.

The following style names can be used:

  • alertWindow: The main alert window.
  • titleBar: The title bar.
  • titleBarLeftIcon: A div that has its style set to float: left.
  • titleBarRightIcon: A div that has its style set to float: right.
  • contentArea: The content area where your text will go.
  • buttonArea: The area that contains your buttons.
  • okButton: Your 'OK' button.
  • cancelButton: Your 'Cancel' button.

Bugs

IE6. Do I really need to say any more?

  • IE6 doesn't support the fixed property. If you want the alert box to stay in the center of the page if the user scrolls, you will need to add your center() method to your window.onscroll event.
  • Select elements will render above other elements, regardless of their z-index. The exception to this rule is an iframe. The script will check to see if you are using IE6 and if so, it will add an iframe behind the alert box to hide the select elements.
  • To simulate modality and opacity, a semi-transparent .png image is used. However, select elements can still be activated. You'll probably want to disable your select elements and re-enable them at the appropriate times.

Points of Interest

The 'filter' property in Internet Explorer has a memory leak when using 'alpha(opacity=##)', even after the owning DOM object is removed. As a result, a semi-transparent .png is used instead. This works well except in IE6, which doesn't support transparent .png files very well. Instead, I used the proprietary AlphaImageLoader when the script detects that the browser is IE6.

History

  • Sunday, August 24, 2008 -- Article created.

License

This article, along with any associated source code and files, is licensed under The BSD License

Share

About the Author

Helbrax
Web Developer
United States United States
No Biography provided

Comments and Discussions

 
GeneralRegarding IE8 problem Pinmember$h0k18-Jun-12 0:14 
Answeratozhelps.blogspot.com/.../customized-alert-box-design-own-alert.html PinmemberMember 268986510-Jun-12 23:14 
Questionreturn value is not firing... [modified] Pinmemberhurera11111-Feb-12 20:28 
GeneralMy vote of 4 PinmemberRedips7714-Jun-11 23:29 
GeneralLoading the contet of a text file into a marquee PinmemberAlexEvans5-Oct-10 14:13 
GeneralProblem trying to use this within an html form PinmemberDave Givens4-Feb-10 5:45 
GeneralRe: Problem trying to use this within an html form PinmemberHelbrax4-Feb-10 7:21 
GeneralRe: Problem trying to use this within an html form PinmemberDave Givens4-Feb-10 7:54 
GeneralRe: Problem trying to use this within an html form PinmemberHelbrax4-Feb-10 9:18 
The problem is that the default action of a button inside a form tag is to submit the form. Whenever you are including javascript that needs to be run on the submission of a form, you need to short circuit the form default action. You can do this a couple of ways. Here are two that should work:
<button name='butt' onclick="doAlert(); return false;">Test</button>
or
<form name='test' onsubmit="return false;">

GeneralRe: Problem trying to use this within an html form PinmemberDave Givens4-Feb-10 10:30 
GeneralRe: Problem trying to use this within an html form PinmemberHelbrax4-Feb-10 16:45 
GeneralRe: Problem trying to use this within an html form PinmemberDave Givens5-Feb-10 5:33 
QuestionIE8 bug? Pinmemberrrnd6-Oct-09 3:40 
AnswerRe: IE8 bug? [modified] PinmemberHelbrax6-Oct-09 4:13 
GeneralRe: IE8 bug? Pinmemberrrnd8-Oct-09 21:02 
GeneralUrgent Help Helbrax Pinmembernagarajgandhi26-Mar-09 3:37 
GeneralRe: Urgent Help Helbrax PinmemberHelbrax26-Mar-09 8:15 
GeneralHi Herbrax Pinmembernagarajgandhi18-Mar-09 0:13 
Questionalert not working on page with frame and header Pinmemberannese20-Nov-08 15:00 
AnswerRe: alert not working on page with frame and header PinmemberHelbrax21-Nov-08 1:35 
QuestionAre frames keeping this from working for me? Pinmemberluaprentoc14-Sep-08 16:45 
AnswerRe: Are frames keeping this from working for me? PinmemberHelbrax15-Sep-08 1:53 
GeneralOutstanding! Pinmemberdpminusa26-Aug-08 9:32 
QuestionMod for Prompt also? Pinmemberdpminusa26-Aug-08 9:11 
AnswerRe: Mod for Prompt also? PinmemberHelbrax26-Aug-08 9:28 
GeneralYaah ... this one is using IFrame PinmemberAbhishek sur24-Aug-08 21:40 
GeneralRe: Yaah ... this one is using IFrame PinmemberHelbrax25-Aug-08 2:38 
GeneralRe: Yaah ... this one is using IFrame PinmemberAbhishek sur25-Aug-08 23:41 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140916.1 | Last Updated 24 Aug 2008
Article Copyright 2008 by Helbrax
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid