Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About BTH User Agreement Privacy Site Map Contact News Feeds

Java Script Message Boxes

You may have more than one input element in your message box design, use this same technique to access the contents of the other input elements. If you have more complex input elements, like check boxes, radio buttons, or a selection list, see other articles on this site for information about how to access their contents.

The form's [Cancel] button onclick event executes a function named Cancel, which simply closes the dialog box. The code for the Cancel function is shown below.

function Cancel()
{
  win.close();
}

This is admittedly a very simple example, but you can use the basic principles described here to design a more complex, and better looking, custom dialog box.

This simple example message box is not modal, in fact it will stay open even after the document that spawned it is closed. I'm not going into detail here, but if you want your custom dialog box to close when the parent window closes, execute the Cancel function from the parent documents <body> tag as shown below.

<body onunload="Cancel()">

If you want your custom dialog box to act modal, add a function that "blurs" the parent window and gives the focus to your custom dialog box. The code for such a function is shown below.

function getFocus()
{
  blur();
  win.focus();
}

Then, at the bottom of your Java Script code block, enter the line shown below, which attaches the getFocus() function to the parent window's onfocus event.

attachEvent("onfocus", getFocus);

• The attachEvent method only works with Internet Explorer. Other browsers use the W3C standard attachEventListener method. However IE 5.5 and earlier don't recognize attachEventListener. There is a work around for this incompatibility, but that's beyond the scope of this article.

Java Script provides three different types of message boxes that allow you to display a short message to the user, or request a bit of information from the user. If one of these built-in message boxes don't suit your needs, this article shows you how to create your own custom message box.

The complete code for the example custom message box is on the next page.