Custom Alert Boxes using JavaScript and the DOM

• Download source code - 6.64 KB

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.