ES6 Dialog Boxes

ES6 has three types of dialog boxes. These dialog boxes are used for various purposes as mentioned below: 

1. Raise an alert that alert function is used to accomplish the task.
2. Get confirmation of an event or input - confirm function is used to accomplish the task.
3. Get an input from the user -prompt function is used to accomplish the task.

Alert Dialog Box: An alert box is used to give a warning message to the users. Alert box has only one button "OK" to select and continue to the next task. For example, When some input fields are compulsory and the user has not given value to that input field a pop up can be displayed using the alert box. 

Syntax: 

alert(message);

Example: The following code demonstrates the alert dialog box: 

<script type="text/javascript">
    function display() {
        alert("I am an Alert dialog box");
    }
</script>
<center>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    <h4>ES6 Dialog Boxes with alert function</h4>
    <p>Click the following button to proceed: </p>
    <input type="button" value="Click Me" onclick="display();" />
</center>

Output: 

Confirm Dialog Box: A confirm dialog box is used to take the user's confirmation option. It displays a dialog box with two buttons: OK and Cancel. For example, if a user deletes some data, the page can confirm it using a confirm box as if really that data is to be deleted. If the user clicks on the OK button, the method returns true value whereas if the user clicks on the Cancel button, then confirm() method returns false. 

Syntax: 

confirm(message);

Example: The following code demonstrates the confirm dialog box:

<script>
    function display() {
        var x = confirm ("I am a Confirm dialog box");
        if( x == true ) {
            document.getElementById("gfg")
                    .innerHTML =  "User wants to continue!";
        }
        else {
            document.getElementById("gfg")
                    .innerHTML =  "User does not want to continue!";
        }
    }
</script>
<center>
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h4>ES6 Dialog Boxes with alert function</h4>
    <p id="gfg">Click the following button to proceed: </p>
    <input type="button" value="Click Me" onclick="display();" />
</center>

Output: 

Prompt Dialog Box: The prompt dialog box is used when a text box is to be popped up to get user input. The user needs to give input in the textbox and then click OK. This dialog box has two buttons: OK and Cancel. If the user clicks the OK button, prompt() reads and returns the value entered by the user. If the user clicks the Cancel button, prompt() returns null. 

Syntax: 

prompt(message, defstring);

Example: The following code demonstrates the prompt dialog box. Here the message is text to be display in the text box and the def string is a default string to display in the text box.

<script>
    function getValue() {
        var retVal = prompt("Enter your Name : ", "name");
        document.getElementById("gfg")
                .innerHTML = "You have entered : " + retVal;
    }
</script>
<center>
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h4>ES6 Dialog Boxes with prompt function</h4>
    <p id="gfg">Click the following button to proceed: </p>
    <form>
        <input type="button" value="Click Me" onclick="getValue();" />
    </form>
</center>

Output:

Supported Browsers: The browsers supported by ES6 Dialog Boxes are listed below: 

• Google Chrome
• Internet Explorer
• Firefox
• Safari
• Opera