JavaScript Dialog Box

By | May 8, 2021

In JavaScript, we get three Dialog boxes. Using these three dialog boxes we can prompt an alert box, get confirmation, and input data from the user.

JavaScript Alert Dialog Box

As the Dialog box name suggests the Alert Dialog box is used to show the alert messages on the user browser. Using the alert dialog box we can also any type of small text message, and it give an OK button to the user to click and continue.

Vamware

To use the alert box we can user alert() function.

Example

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript">
            function message() {
                alert ("Alert Message");
                document.write("You cicked on the Alert Ok");  
            }
       
      </script>
   </head>
   
   <body>
      <p>Click the button to see alert message.</p>
      <button onclick = "message();"> Click here to Show Alert</button>
   </body>
</html>

Output

Click the button to see alert message.

Confirmation Dialog Box

The Confirmation Dialog box is similar to the alert box, but here the user gets two options OK and cancel. 

To use the Confirmation dialog box we can use the confirm() function, and it returns a boolean value true or false based on what user clickss OK or cancel.

Example

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript">
            function vote() {
                result =confirm ("Are you 18+");
                if(result==true)
                    document.write("You can vote");
                else
                    document.write("You can not vote")  
            }
      </script>
   </head>
   <body>
      <p>Can vote?</p>
      <button onclick = "vote();"> Are you above 18?</button>
   </body>
</html>

Output

Can vote.

Prompt Dialog Box

The Prompt dialog box also creates a pop-up text box, but it is used to get input data from the user.

To use the prompt dialog box we can use the prompt() function. The prompt() function also pop-up two options OK and Cancel. If the user fills the prompt box and clicks on the OK button, the prompt() function returns the user-written text value as a string, if the user click on the Cancel button the function return null.

Example

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript">
            function get_name(){
                user = prompt("Enter Your name");
                if(user)
                {
                    document.write("Your Name is "+user);
                }
                 
            }
       
      </script>
   </head>
  
   <body>
      <p>Hello.</p>
      <button onclick = "get_name();"> Click here</button>
       
   </body>
</html>

Output

Hello.

Summary

  • The alert() function is used to pop up a single option alert box.
  • The confirm() function is used to pop up two options confirmation box.
  • The prompt() function is used to pop up two options prompt box.

 

Leave a Reply

Your email address will not be published. Required fields are marked *