Here is a tutorial post of dialog boxes / popup boxes in JavaScript. In JavaScript, there are three dialog / popup boxes. These three different types of boxes listed below:
- Alert Dialog Box
- Confirm Dialog Box
- Prompt Dialog Box
 |
| JavaScript Dialog Boxes |
Now we will see these three dialog boxes one by one:
Alert dialog box is used to give any message to the user.
Mostly alert dialog box is used in form validation error message display, for example in form, you have email id field and you have not entered email id then as an error message, you can alert user using Alert dialog box.
Example
Alert dialog box also can be written using window prefix like below:
But you can also write without window prefix.
Alert dialog box contains only one 'Ok' button. User must have to click on 'Ok' button to precess further.
The Alert dialog box looks like as following image:
Confirm dialog box is a dialog box that contains 'Ok' and 'Cancel' button.
Confirm dialog box often used for to accept something from user.
If user clicks on 'Ok' button then confirm dialog box returns true. If user clicks on 'Cancel' button then confirm dialog box returns false.
Example:
The confirm dialog box looks like as following image:
Prompt dialog box is used to get user input.
Prompt dialog box can be displayed using prompt() method of window object.
Prompt method takes two parameters: 1) Label of prompt box and 2) Default value for user input field.
Prompt dialog box contains two buttons named 'Ok' and 'Cancel' and one text input field.
If user clicks on 'Ok' button then inputed text is returned and if user clicks on 'Cancel' button then null is returned.
The prompt dialog box looks like as following image:
1. Alert Dialog Box
Alert dialog box is used to give any message to the user.
Mostly alert dialog box is used in form validation error message display, for example in form, you have email id field and you have not entered email id then as an error message, you can alert user using Alert dialog box.
Example
<head>
<script type="text/javascript">
alert('This is Alert Box');
</script>
</head>
<script type="text/javascript">
alert('This is Alert Box');
</script>
</head>
Alert dialog box also can be written using window prefix like below:
window.alert('This is Alert Box');
But you can also write without window prefix.
Alert dialog box contains only one 'Ok' button. User must have to click on 'Ok' button to precess further.
The Alert dialog box looks like as following image:
2. Confirm Dialog Box
Confirm dialog box is a dialog box that contains 'Ok' and 'Cancel' button.
Confirm dialog box often used for to accept something from user.
If user clicks on 'Ok' button then confirm dialog box returns true. If user clicks on 'Cancel' button then confirm dialog box returns false.
Example:
<head>
<script type="text/javascript">
var result = confirm('Click on button');
if(result == true)
{
alert('Ok button clicked');
}
else
{
alert('Cancel button clicked');
}
</script>
</head>
<script type="text/javascript">
var result = confirm('Click on button');
if(result == true)
{
alert('Ok button clicked');
}
else
{
alert('Cancel button clicked');
}
</script>
</head>
The confirm dialog box looks like as following image:
3. Prompt Dialog Box
Prompt dialog box is used to get user input.
Prompt dialog box can be displayed using prompt() method of window object.
Prompt method takes two parameters: 1) Label of prompt box and 2) Default value for user input field.
Prompt dialog box contains two buttons named 'Ok' and 'Cancel' and one text input field.
If user clicks on 'Ok' button then inputed text is returned and if user clicks on 'Cancel' button then null is returned.
<head>
<script type="text/javascript">
var name = prompt('Enter Name : ', 'John Smith');
alert('Inputed Value : ' + name);
</script>
</head>
<script type="text/javascript">
var name = prompt('Enter Name : ', 'John Smith');
alert('Inputed Value : ' + name);
</script>
</head>
The prompt dialog box looks like as following image:
