Dialog box in ES6
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
prompt(message, default_string);
Example
Here, we have an example to understand the prompt dialog box.
<html>
<head>
<script type="text/javascript">
function display() {
var value = prompt("Enter the Name : ", "Enter the name");
document.write("The Name is : " + value);
}
</script>
</head>
<body>
<center>
<h1>Hello ES6</h1>
<h2>Welcome to ES6</h2>
<p>Click on the button </p>
<input type="button" value="Click Me" onclick="display();" />
</center>
</body>
</html>
Output
After the execution of the code, we got the following output:
After the clicking on the button, we got the following output:
When we entered the name and click, OK, we got the following output:.
As shown in the snippet above, we entered Robert after the click on OK button we got the following output.
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
confirm(message);
Example
Here, we have an example to understand the above dialog box.
<html>
<head>
<script type="text/javascript">
function display() {
var c = confirm ("Do you want to continue ?");
if(c == true) {
document.write ("We Want to continue");
}
else {
document.write ("We does not want to continue");
}
}
</script>
</head>
<body>
<center>
<h2>Hello ES6</h2>
<h3>Welcome to ES6</h3>
<p>Click on the button </p>
<input type="button" value="Click Me" onclick="display();" />
</center>
</body>
</html>
Output
After the successful execution of the code, we got the following output:
When we click on the button, then we will get the following output.
Now, if we click on Ok, we got the following output:
If we click on the Cancel option, then we will get the following output.
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
Alert(message);
Example
An example is given below to understand the alert dialog box.
<html>
<head>
<script type="text/javascript">
function display() {
alert("Alert dialog box");
}
</script>
</head>
<body>
<center>
<h2>Hello User</h2>
<h3>Welcome ES6</h3>
<p>Click on the button </p>
<input type="button" value="Click Me" onclick="display();" />
</center>
</body>
</html>
Output
We will get the following output, after the successful execution of the code.
When we click on the button, we got the following output:
