1. Tech

Your suggestion is on its way!

An email with a link to:


was emailed to:

Thanks for sharing About.com with others!

Modal Dialog Box

Part 1 : Introduction and Sample Page

One limitation of Javascript is that it only provides three dialog boxes that you can link to from within JavaScript and they are intended more for debugging your script than interacting with visitors (as in some browsers they contain a checkbox to disable JavaScript). Dialog boxes are useful because they allow the script to interact with your visitor where that visitor must provide a response to the dialog box before the script can continue processing. This is because dialog boxes are modal and do not permit anything else to happen until the dialog box receives a response.

The three dialog boxes that Javascript provides are alert() which displays a message and an OK button, confirm() which provides a message along with OK and cancel buttons and returns true if OK is pressed and false if cancel is pressed, and finally prompt() which provides a text input box and an OK button and returns the text that is entered.

So what do we do when we want a dialog box that is different from any of these three or want to ensure that our visitors can't use the dialog to disable JavaScript? We build our own of course. Well we can't build an actual dialog box since those are created by the browser (which is why they look different depending on which browser you are running). What we can do is to build something into our web page that achieves the same result. Let's start by looking at an example of a modal dialog alert substitute. Well go on, click on the preceding red underlined text to see the effect. Of course since the actual content of the "dialog box" is coded in the HTML of the page we can customize it to contain whatever content that we want rather than being limited to the three standard dialog boxes. We just need to handle the processing of what we get back from the script a little differently since the Javascript doesn't actually wait for the response but that is quite simple to handle as well.

Note that the script has now been updated to ensure that your visitors can't use the tab key to access forms outside of the modal dialog.

If this is the effect that you want to add to your page then the next step is to obtain the script.

Press OK to continue.

©2016 About.com. All rights reserved.