12.1 Simple Dialogs

Three commonly used Window methods are alert(), confirm(), and prompt(). These methods pop up simple dialog boxes. alert() displays a message to the user. confirm() asks the user to click an Ok or Cancel button to confirm or abort an operation. And prompt() asks the user to enter a string. Sample dialogs produced by these three methods are shown in Figure 12.1, and Example 12.1 shows some typical uses of these methods.

Note that the text displayed by these dialog boxes is plain text, not HTML-formatted text. The only formatting you can do is with spaces, newlines, and various punctuation characters. Adjusting the formatting generally requires trial-and-error. Bear in mind, though, that the dialogs will look different on different platforms and in different browsers, so you can't always count on your formatting to look right on all possible browsers.

The most commonly asked question about these dialog boxes is, "How can I get rid of the `JavaScript Alert:' message?" There is no way to do this. It is there to prevent you from writing malicious code that spoofs system dialogs and tricks users into doing things that they shouldn't do.

Finally, note that JavaScript code keeps executing when an alert() dialog is posted, but both the confirm() and prompt() methods block--that is, those methods do not return until the user dismisses the dialog they display. This means that when you pop one up, your code will stop running and the currently loading document, if any, will stop loading until the user responds with the requested input. There is no alternative to blocking for these methods--their return value is the user's input, so they must wait for the user before they can return.

// Here's a function that uses the alert() method to tell the user
// that their form submission will take some time, and that they should
// be patient. It would be suitable for use in the onSubmit() event handler
// of an HTML form. 
// Note that all formatting is done with spaces, newlines, and underscores.
function warn_on_submit()
{
    alert("\n__________________________________________________\n\n" +
          "                  Your query is being submitted....\n"    +
          "__________________________________________________\n\n"   +
          "Please be aware that complex queries such as yours\n"     +
          "     can require a minute or more of search time.\n\n"    +
          "                         Please be patient.");
}
// Here is a use of the confirm() method to ask the user if they really
// want to visit a web page that takes a long time to download. Note that
// the return value of the method indicates the user response. Based
// on this response, we reroute the browser to an appropriate page.
var msg = "\nYou are about to experience the most\n\n" +
          "                -=| AWESOME |=-\n\n" +
          "Web page you have ever visited!!!!!!\n\n" +
          "This page takes an average of 15 minutes to\n" +
          "download over a 28.8K modem connection.\n\n" +
          "Are you ready for a *good* time, Dude????";
if (confirm(msg)) 
    location.replace("awesome_page.html");
else
    location.replace("lame_page.html");
// Here's some very simple code that uses the prompt() method to get
// a user's name, and then uses that name in dynamically generated HTML.
n = prompt("What is your name?", "");
document.write("<hr><h1>Welcome to my home page, " + n + "</h1><hr>");