ES6 Tutorial
ES6 Functions
ES6 Arrays
ES6 Objects
- es6-objects
- object-destructuring
ES6 Class
- es6-classes
ES6 Strings
- es6-strings
- es6-template-literals
Advance Features
ES6 Miscellaneous
- es5-vs-es6
Interview Questions
- es6-interview-questions

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

Example

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

     <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 javaTpoint</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.

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

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

Example

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

     <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 javaTpoint</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.

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

After clicking the OK button, you will get:

On clicking the Cancel button, you will get:

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

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

Example

     <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 javaTpoint</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.