Dialog Boxes in JavaScript

Introduction

 
In the previous chapter, we learned about Page Redirection in JavaScript with example programs.
 
In this article, we will learn about JavaScript dialog boxes and its types in JavaScript with an example program.
 

JavaScript Dialog Boxes

 
There are mostly three types of dialog boxes in JavaScript. They are used to either show confirmation messages, raise an error, or show a warning message. You can get input also from these dialog boxes. The following are the dialog boxes in JavaScript.
 

Types of Dialog Box 

  1. Alert Dialog Box
  2. Prompt Dialog Box
  3. 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:
  1. <!DOCTYPE html>    
  2. <html>    
  3. <title>JavaScript Dialog Box</title>    
  4. <head></head>    
  5. <body>    
  6. <script language="javascript">    
  7.     alert("Hello, From C# Corner");    
  8. </script>    
  9. </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:
  1. <!DOCTYPE html>    
  2. <html>    
  3. <title>JavaScript Dialog Box</title>    
  4. <head></head>    
  5. <body>    
  6. <script language="javascript">    
  7.     var test = prompt("Welcome To Coding World, Enter Your Name:",”krishna”);    
  8.     document.write("Welcome to C# Corner - " + test);        
  9. </script>    
  10. </body>    
  11. </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
  1. 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
     
  2. 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:
  1. <!DOCTYPE html>    
  2. <html>    
  3. <title>JavaScript Dialog Box</title>    
  4. <head></head>    
  5. <body>    
  6. <script language="javascript">    
  7.     var t = confirm("Do you really want to Exit?");       
  8.     if(t == true)    
  9.     {    
  10.         document.write("Thanks for using");    
  11.     }    
  12.     else    
  13.     {    
  14.         document.write("Welcome To C# Corner");    
  15.     }    
  16. </script>    
  17. </body>    
  18. </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
  1. When the user clicks “OK” the output is as follows:
     
    message
     
  2. When the user clicks “Cancel” the output is as follows:
     
    message box

Summary

 
In this article, we learned about the concept of dialog boxes in JavaScript its types with examples. 
Author
Jeetendra Gund
Jeetendra Gund
48 30.7k 3.1m