JavaScript Dialog Box

    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. 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. Click here to Show Alert

    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.Are you above 18?
    

    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.Click here
    

    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.
    People are also reading: