Popup Box in JavaScript

JavaScript supports three types of dialog boxes:

  • Alert box
  • Confirmation box
  • Pop up box

Alert Box

An alert dialog box is mostly used to give a warning message to the users especially for validation purposes when a use inputs some wrong data, we can use an alert box to display a warning message.

The drawback of Alert box is only one button “OK” is available to select and proceed.

Syntax

The window.alert() method can be written without the window prefix.

Example

Confirmation Box

A confirmation box is used to take user’s consent on any particular situation.

It displays two buttons: OK and Cancel. It can be called as the improvised version of an alert box.

When the user clicks on OK, the window method confirm() returns true. When user clicks on the Cancel button, confirm() returns false. 

Syntax

The window.confirm() method can also be written without the ‘window’ prefix.

Example

Prompt Box

The prompt box is useful when we want to pop-up a text box for getting user input.

Thus, it gives you provision to interact with user. The user needs to fill the field and click OK.

This dialog box is displayed using a method called prompt() which takes two parameters:

  • A label that you want to display in the text box
  • A default string needs to be displayed in the text box

Prompt box has two buttons: OK and Cancel.

If the user clicks the OK button, the window method prompt() will return the entered value from the text box.

If the user clicks the Cancel button, the window method returns null.

Syntax

The window.prompt() method can also be written without the ‘window’ prefix.

Example