Dialog box in ES6

A dialog box can be defined as a regular type of window in the Graphical User Interface (GUI) of the operating system. It is also spelled as a dialogue box. It is prompt to provide the select commands and information.

There are three types of dialog boxes used in ES6 such as-

  • Prompt Dialog Box
  • Confirmation Dialog Box
  • Alert Dialog Box

 The dialog boxes are used to perform the following specific tasks-

  • To take input from the user  
  • To raise an alert message
  • To take confirmation on input and event

Here, we will try to elaborate each type of dialog box in detail.

Prompt Dialog Box

The prompt dialog box is used when we need to pop-up a text box to take input from user side. It enables us to interact with the user. The prompt dialog box contains two buttons- Ok and Cancel.

If the user requires providing input to the textbox, click Ok. When the user clicks on the Ok button, then the dialog box interprets the value and returns it to the user. If the user click on the Cancel button, the prompt method () return the null value.

Syntax

Example

Here, we have an example to understand the prompt dialog box.

Output

After the execution of the code, we got the following output:

Dialog box in ES6

After the clicking on the button, we got the following output:

Dialog box in ES6

When we entered the name and click, OK, we got the following output:.

Dialog box in ES6

As shown in the snippet above, we entered Robert after the click on OK button we got the following output.

Dialog box in ES6

Confirmation Dialog Box

The confirmation dialog box is used, when we require taking the consent on any option from the user side. The confirmation dialog box also contains two buttons- Ok and Cancel.

It has a confirm method (). If the user clicks on the Ok button, the confirm method () returns true. But if the user clicks on the cancel button, the method returns false. For Example- If a user wants to delete some data, the page can confirm it with the help of a confirmation box.

Syntax

Example

Here, we have an example to understand the above dialog box.

Output

After the successful execution of the code, we got the following output:

Dialog box in ES6

When we click on the button, then we will get the following output.

Dialog box in ES6

Now, if we click on Ok, we got the following output:

Dialog box in ES6

If we click on the Cancel option, then we will get the following output.

Dialog box in ES6

Alert Dialog Box

The alert dialog box is used when the system needs to send a warning message to the user. It is a commonly used dialog box in ES6. The alert dialog box only contains OK button to select the next task and continue. For example, if an input area requires to be filled, but the user skips that input area, then the alert dialog box is used to show a warning message to the user.

Syntax

Example

An example is given below to understand the alert dialog box.

Output

We will get the following output, after the successful execution of the code.

Dialog box in ES6

When we click on the button, we got the following output:

Dialog box in ES6

Pin It on Pinterest

Share This