JS Dialog Boxes

In this tutorial, you will learn how to create dialog boxes in JavaScript.

Creating Dialog Boxes

Dialog boxes or popups can be created in JavaScript to interact with the user. It can either be used to notify a user or to receive some kind of user input before proceeding.

Three different types of dialog boxes can be created and they are:

• Alert dialog boxes
• Confirm dialog boxes
• Prompt dialog boxes

The operating system and/or browser settings determine the appearance of the above-mentioned dialog boxes and they cannot be modified with the CSS. In addition, dialog boxes are modal windows whereby code execution stops when a dialog box is displayed and resumes only after it has been dismissed.

In the following section, we will discuss each of these dialog boxes in detail.
 

Creating Alert Dialog Boxes

An alert dialog box is the simplest type of dialog box because it enables one to display a short message to the user. It contains an OK button which permits the user to continue once the Ok button is clicked on.

Alert dialog boxes can be created with the alert() method. Even though a lot of alert examples have been shared in the previous chapters, let's still take a look at one more example:

var message = "Hi there! Click OK to continue.";
alert(message);
 
/* The following line won't execute until you dismiss previous alert */
alert("This is another alert box.");

Try with example

Creating Confirm Dialog Boxes

A confirm dialog box either permits a user to confirm or cancel an action. A confirm dialog looks similar to an alert dialog but can be differentiated by the presence of a Cancel button along with the OK button.

Dialog boxes can be created using the confirm() method. This method simply returns a Boolean value, either true or false depending on the button the user clicks on, i.e OK or Cancel button. That's why its result is often assigned to a variable when it is used.

The following example will print some text in the browser depending on which button is clicked.

var result = confirm("Are you sure?");
 
if(result) {
    document.write("You clicked OK button!");
} else {
    document.write("You clicked Cancel button!");
}

Try with example

Creating Prompt Dialog Box

The prompt dialog box notifies the user to input information. A prompt dialog box includes an OK button, a text input field, and a Cancel button.

Prompt dialog boxes can be created using the prompt() method. In this method, when the user clicks the OK button the text entered is returned in the input field, while null is returned if the user clicks the Cancel button. An empty string is returned if the user clicks the OK button without entering any text. For this purpose, its result is basically attached to a variable when it is used.

The example below will print the value you entered when you clicked the OK button.

var name = prompt("What's your name?");
 
if(name.length > 0 && name != "null") {
    document.write("Hi, " + name);
} else {
    document.write("Anonymous!");
}

Try with example

The prompt() method always returns a string as the value, that is, if the user enters 10 in the input field, the string "10" is returned instead of the number 10.

More so, to use the returned value as a number, it must be converted or cast to a Number, like this: var age = Number(prompt("What's your age?")).

Tip: For display of line breaks inside the dialog boxes, newline character or line feed (n); a backslash’‘ followed by the character n can be used.