There are three types of dialog boxes supported in JavaScript that are alert, confirm, and prompt. These dialog boxes can be used to perform specific tasks such as raise an alert, to get confirmation of an event or an input, and to get input from the user.
Let's discuss each dialog box.
It is used to provide a warning message to users. It is one of the most widely used dialog box in JavaScript. It has only one 'OK' button to continue and select the next task.
We can understand it by an example like suppose a textfield is mandatory to be filled out, but the user has not given any input value to that text field, then we can display a warning message by using the alert box.
alert(message);
Let us see the demonstration of an alert dialog box by using the following example.
<html>
<head>
<script type="text/javascript">
function show() {
alert("It is an Alert dialog box");
}
</script>
</head>
<body>
<center>
<h1>Hello World :) :)</h1>
<h2>Welcome to rookienerd</h2>
<p>Click the following button </p>
<input type="button" value="Click Me" onclick="show();" />
</center>
</body>
</html>After the successful execution of the above code, you will get the following output.
After clicking on the Click Me button, you will get the following output:
It is widely used for taking the opinion from the user on the specific option. It includes two buttons, which are OK and Cancel. As an example, suppose a user is required to delete some data, then the page can confirm it by using the confirmation box that whether he/she wants to delete it or not.
If a user clicks on the OK button, then the method confirm() returns true. But if the user clicks on the cancel button, then the confirm() method returns false.
confirm(message);
Let us understand the demonstration of this dialog box by using the following example.
<html>
<head>
<script type="text/javascript">
function show() {
var con = confirm ("It is a Confirm dialog box");
if(con == true) {
document.write ("User Want to continue");
}
else {
document.write ("User does not want to continue");
}
}
</script>
</head>
<body>
<center>
<h1>Hello World :) :)</h1>
<h2>Welcome to rookienerd</h2>
<p>Click the following button </p>
<input type="button" value="Click Me" onclick="show();" />
</center>
</body>
</html>
After the successful execution of the above code, you will get the following output.
When you click on the given button, then you will get the following output:
After clicking the OK button, you will get:
On clicking the Cancel button, you will get:
The prompt dialog box is used when it is required to pop-up a text box for getting the user input. Thus, it enables interaction with the user.
The prompt dialog box also has two buttons, which are OK and Cancel. The user needs to provide input in the textbox and then click OK. When a user clicks on the OK button, then the dialog box reads that value and returns it to the user. But on clicking the Cancel button, prompt() method returns null.
prompt(message, default_string);
Let us understand the prompt dialog box by using the following illustration.
<html>
<head>
<script type="text/javascript">
function show() {
var value = prompt("Enter your Name : ", "Enter your name");
document.write("Your Name is : " + value);
}
</script>
</head>
<body>
<center>
<h1>Hello World :) :)</h1>
<h2>Welcome to rookienerd</h2>
<p>Click the following button </p>
<input type="button" value="Click Me" onclick="show();" />
</center>
</body>
</html>After executing the above code successfully, you will get the following output.
When you click on the Click Me button, you will get the following output:
Enter your name and click OK button, you will get:
