In JavaScript, you can generate dialog boxes or popups to interact with users. These dialog boxes can be used for notifications or to collect user input before proceeding.
There are three types of dialog boxes: alert, confirm, and prompt.
The appearance of these dialog boxes is controlled by the operating system and/or browser settings and cannot be customized with CSS. Dialog boxes are also modal windows, meaning code execution pauses when a dialog box is shown and resumes only after it is closed.
Next, we will explain each type of dialog box in detail.
An alert dialog box is the simplest type, used to display a brief message to the user. It includes an OK button, and users must click OK to proceed.
You can create alert dialog boxes using the alert() method. You've likely encountered many examples of alerts in previous chapters. Here's 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.");A confirmation dialog box allows the user to either confirm or cancel an action. It resembles an alert dialog but includes both an OK and a Cancel button.
You can create confirmation dialog boxes using the confirm() method. This method returns a Boolean value (true or false) based on whether the user clicks OK or Cancel. Therefore, its result is often stored in a variable for further use.
The following example demonstrates displaying text in the browser depending on which button the user clicks.
var result = confirm("Are you sure?");
if(result) {
document.write("You clicked OK button!");
} else {
document.write("You clicked Cancel button!");
}A prompt dialog box prompts the user to enter information. It includes a text input field, as well as OK and Cancel buttons.
You can create prompt dialog boxes using the prompt() method. When the user clicks OK, this method returns the text entered in the input field. If the user clicks Cancel, it returns null. If the OK button is clicked without entering any text, it returns an empty string. Therefore, the result is typically stored in a variable for further use.
The following example demonstrates printing the value entered when the OK button is clicked:
var name = prompt("What's your name?");
if(name.length > 0 && name != "null") {
document.write("Hi, " + name);
} else {
document.write("Anonymous!");
}The value returned by the prompt() method is always a string. For example, if the user enters 10 in the input field, the method will return the string "10" instead of the number 10.
Therefore, if you intend to use the returned value as a number, you must convert it or cast it to a Number, like this: var age = Number(prompt("What's your age?"));
Tip: To display line breaks inside dialog boxes, use the newline character or line feed (\n), which is a backslash followed by the letter 'n'.