ES6 Dialog boxes

There are three types of dialog boxes supported in JavaScript that are alert, confirm, and prompt. These dialog boxes can be used to perform specific tasks such as raise an alert, to get confirmation of an event or an input, and to get input from the user.

Let's discuss each dialog box.

Alert Dialog box

It is used to provide a warning message to users. It is one of the most widely used dialog box in JavaScript. It has only one 'OK' button to continue and select the next task.

We can understand it by an example like suppose a textfield is mandatory to be filled out, but the user has not given any input value to that text field, then we can display a warning message by using the alert box.

Syntax
alert(message);

Let us see the demonstration of an alert dialog box by using the following example.

Example
snippet
<html> 
  
<head>  
    <script type="text/javascript"> 
        function show() { 
            alert("It is an Alert dialog box"); 
        } 
    </script> 
</head> 
  
<body> 
    <center> 
        <h1>Hello World :) :)</h1> 
        <h2>Welcome to rookienerd</h2> 
        <p>Click the following button </p> 
        <input type="button" value="Click Me" onclick="show();" /> 
    </center> 
</body> 
  
</html>

Output

After the successful execution of the above code, you will get the following output.

ES6 Dialog boxes

After clicking on the Click Me button, you will get the following output:

ES6 Dialog boxes

Confirmation Dialog box

It is widely used for taking the opinion from the user on the specific option. It includes two buttons, which are OK and Cancel. As an example, suppose a user is required to delete some data, then the page can confirm it by using the confirmation box that whether he/she wants to delete it or not.

If a user clicks on the OK button, then the method confirm() returns true. But if the user clicks on the cancel button, then the confirm() method returns false.

Syntax
confirm(message);

Let us understand the demonstration of this dialog box by using the following example.

Example
snippet
<html> 
  
<head>  
    <script type="text/javascript"> 
        function show() { 
            var con = confirm ("It is a Confirm dialog box"); 
            if(con == true) { 
                document.write ("User Want to continue"); 
            }  
            else { 
                document.write ("User does not want to continue"); 
            } 
        } 
    </script> 
</head> 
  
<body> 
    <center> 
        <h1>Hello World :) :)</h1> 
        <h2>Welcome to rookienerd</h2> 
        <p>Click the following button </p> 
        <input type="button" value="Click Me" onclick="show();" /> 
    </center> 
</body> 
  
</html>

Output

After the successful execution of the above code, you will get the following output.

ES6 Dialog boxes

When you click on the given button, then you will get the following output:

ES6 Dialog boxes

After clicking the OK button, you will get:

ES6 Dialog boxes

On clicking the Cancel button, you will get:

ES6 Dialog boxes

Prompt Dialog box

The prompt dialog box is used when it is required to pop-up a text box for getting the user input. Thus, it enables interaction with the user.

The prompt dialog box also has two buttons, which are OK and Cancel. The user needs to provide input in the textbox and then click OK. When a user clicks on the OK button, then the dialog box reads that value and returns it to the user. But on clicking the Cancel button, prompt() method returns null.

Syntax
prompt(message, default_string);

Let us understand the prompt dialog box by using the following illustration.

Example
snippet
<html> 
  
<head>  
    <script type="text/javascript"> 
        function show() { 
            var value = prompt("Enter your Name : ", "Enter your name"); 
            document.write("Your Name is : " + value); 
        } 
    </script> 
</head> 
  
<body> 
    <center> 
        <h1>Hello World :) :)</h1> 
        <h2>Welcome to rookienerd</h2> 
        <p>Click the following button </p> 
        <input type="button" value="Click Me" onclick="show();" /> 
    </center> 
</body> 
  
</html>

Output

After executing the above code successfully, you will get the following output.

ES6 Dialog boxes

When you click on the Click Me button, you will get the following output:

ES6 Dialog boxes

Enter your name and click OK button, you will get:

ES6 Dialog boxes
Related Tutorial
Follow Us
https://www.facebook.com/Rookie-Nerd-638990322793530 https://twitter.com/RookieNerdTutor https://plus.google.com/b/117136517396468545840 #
Contents +