JavaScript Popup Boxes

JavaScript provides various popup boxes to notify, warn, or to get input from the user. Popup boxes prevent the user from accessing other aspects of a program until the popup is closed, so they should not be overused.

There are three different kinds of popup methods used in JavaScript.

• Alert box

• Confirm box

• Prompt box

JavaScript Alert Box

An alert dialog box is mostly used to inform or alert the user by displaying some messages in a small dialogue box. Following is the syntax for it:

alert("YOUR MESSAGE COMES HERE");

Let's take an example to see it in action.

JavaScript Confirm Box

A confirmation box is used to let the user make a choice. When Javascript pops up a confirm box, the user will have to click either "OK" or "Cancel" to proceed to the next step.

Also, based on what the user clicks on we can perform different actions. We can specify this course of action with conditional logic.

let result = window.confirm("SOME TEXT MESSAGE");

When the user clicks on the OK button then the result variable will get the value true and if the user clicks on the Cancel button the result variable will get the value false.

Let's take an example and see this in action:

JavaScript Prompt Box

Javascript Prompt Box can be used when we want to get some user input. When Javascript displays a prompt box, the user will see a popup box with an input field and buttons "OK" or "Cancel" to proceed after entering an input value.

Following is the syntax for the JavaScript Prompt box:

let result = prompt("SOME MESSAGE", "DEFAULT_VALUE");

Here, SOME MESSAGE is the message which is displayed in the popup box, and DEFAULT_VALUE is the default value in the input field. The default value is an optional field.

The value returned by the prompt depends on what exactly the user does with the dialog.

JavaScript Pop Up Boxes Use:

Now that we know about the three popup boxes that we can create and use in JavaScript, let's cover a few usecase where we can use them.

JavaScript Alert box can be used to show any error message or any help message. For example, if you perform form field validation, and you find some field value incorrect, you can show an alert box with a message to inform user about the incorrect input.

JavaScript Confirm box is a good way to confirm any important user action like if we have a feature in our web application where upon clicking a button, we make an AJAX call to the server to delete some data from the database, in such cases, it's better to confirm once when the button is clicked to give the user a second chance to confirm or cancel the request if its done by mistake. So, for important actions, we should use the confirm popup box.

JavaScript Prompt box can be used to create a menu like system where based on user input different actions are performed using the JavaScript switch statement. Let's take a simple code example to demonstrate this:

In this tutorial we covered JavaScript popup boxes like alert box, confirm box and prompt box. You can use them to make your application more responsive.