Introduction
This article explains JavaScript dialog boxes. There are three important dialog boxes in JavaScript.
JavaScript Dialog Boxes
There are mostly three types of dialog boxes in JavaScript. They are used to either show a confirmation messages, raise an error or show a warning messages. You can get input also from these dialog boxes. The following are the dialog boxes in JavaScript:
- Alert Dialog Box
- Prompt Dialog Box
- Confirmation Dialog Box
Now you can learn about JavaScript dialog boxes one by one.
Alert Dialog Box
This dialog box is mostly used for validation. It displays a message in the dialog box. This dialog box will block the browser. You cannot do anything in the browser page without pressing the “OK” button of this dialog box, then it is closed. It is used for displaying error messages.
Example alert dialog box:
- <!DOCTYPE html>
- <html>
- <title>JavaScript Dialog Box</title>
- <head></head>
- <body>
- <script language="javascript">
- alert("Hello, From C# Corner");
- </script>
- </body>
Output:
![program output]()
Prompt Dialog Box
It is the only dialog box that can get input from the user. This dialog box has the two buttons “OK” and “Cancel”. Using this dialog box you can get input from the user then perform the operation you want on that input value. You can provide a default value for the prompt dialog box. The default value is “undefined”.
The following is an example of a prompt dialog box:
- <!DOCTYPE html>
- <html>
- <title>JavaScript Dialog Box</title>
- <head></head>
- <body>
- <script language="javascript">
- var test = prompt("Welcome To Coding World, Enter Your Name:",”krishna”);
- document.write("Welcome to C# Corner - " + test);
- </script>
- </body>
- </html>
In the preceding example, in the first statement I used a prompt dialog box and got input from the user and stored it in a test variable. The second statement writes the user's input value to the browser using document.write();
Output
- First the output is the prompt dialog box then a value is entered (you can provide default value, here I can provide “krishna”).
![prompt dialog box]()
- When you click on the “OK” button it will show in the browser:
![show output]()
Confirmation Dialog Box
This dialog box is mostly used, for providing confirmation for the user of specific actions. When you are exiting from a window then it could request confirmation from the user, like “Do you really want to Exit?”, It displays two buttons on the dialog box: “OK” and “Cancel”. When you click the “OK” button it returns true otherwise it returns false.
The following is an example of a confirmation dialog box:
- <!DOCTYPE html>
- <html>
- <title>JavaScript Dialog Box</title>
- <head></head>
- <body>
- <script language="javascript">
- var t = confirm("Do you really want to Exit?");
- if(t == true)
- {
- document.write("Thanks for using");
- }
- else
- {
- document.write("Welcome To C# Corner");
- }
- </script>
- </body>
- </html>
In this example, the first statement requests confirmation from the user. It will check the user selection whether it is true or false and prints on the browser.
Output:
![confirm dialog box]()
- When the user clicks “OK” the output is as follows:
![message]()
- When the user clicks “Cancel” the output is as follows:
![message box]()
Summary
I hope you understand the concept of dialog boxes in JavaScript. If you have any suggestion regarding this article then please contact me.