What are the types of Popup box available in JavaScript ?

Last Updated : 26 Sep, 2024

In JavaScript, there are three types of popup boxes: alert, confirm, and prompt. The alert() displays a simple message, the confirm() asks the user to accept or cancel, and the prompt() requests user input with an optional default value.

There are three types of pop-up boxes in JavaScript:

Table of Content

Alert Box
Prompt Box
Confirm Box

Alert Box

An alert box in JavaScript is a popup window that displays a simple message to the user. It is triggered by the alert() function and pauses code execution until the user clicks the “OK” button to close it.

Syntax:

alert("your Alert here");

Example: This example we displays a button that triggers an alert box using JavaScript. When the button is clicked, an alert message.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Pop-up Box type Alert Box</title>
    <style>
        h1 {
            color: green;
        }
    </style>
</head>

<body>
    <center>
        <h1>GeeksforGeeks</h1>

        <h3>Alert Box</h3>
        <button onclick="geekAlert()">
            Click here for alert box
        </button>

        <!-- Alert box function -->
        <script>
            function geekAlert() {
                alert("An Online Computer Science"
                    + "Portal for Geeks");
            }
        </script>
    </center>
</body>

</html>

Output:

Prompt Box

A prompt box in JavaScript is a popup window that asks the user for input. It is triggered by the prompt() function, which displays a message and input field, allowing the user to provide a response or cancel.

Syntax:

prompt("your Prompt here");

Example: This example we displays a button that triggers a prompt box using JavaScript. When clicked, the user is asked to input their email, and the entered value is displayed on the page.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        Pop-up Box type Prompt Box
    </title>
    <style>
        h1 {
            color: green;
        }
    </style>
</head>

<body>
    <center>
        <h1>GeeksforGeeks</h1>

        <h3>Prompt Box</h3>

        <input type="button" 
               onclick="geekPrompt();" 
               value="Click here for Prompt box" />

        <!-- Prompt box function -->
        <script>
            function geekPrompt() {
                let x = prompt("Enter your mail here : ");
                document.write("Your ID : " + x);
            }
        </script>
    </center>
</body>

</html>

Output:

Confirm Box

It is a type of pop-up box that is used to get authorization or permission from the user. The user has to press the ok or cancel button to proceed.

Syntax:

confirm("your query here");

Example: This example we displays a button that triggers a prompt box using JavaScript. When clicked, the user is asked to input their email, and the entered value is displayed on the page.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        Pop-up Box type Confirm Box
    </title>
    <style>
        h1 {
            color: green;
        }
    </style>
</head>

<body>
    <center>

        <h1>GeeksforGeeks</h1>

        <h3>Confirm Box</h3>

        <button onclick="geekConfirm()">
            Click here for Confirm box
        </button>

        <p id="geek"></p>


        <!-- Confirm box function -->
        <script>
            function geekConfirm() {
                var x;
                if (confirm("Press a button!") == true) {
                    x = "OK pressed!";
                } else {
                    x = "Cancel!";
                }
                document.getElementById("geek").innerHTML = x;
            }
        </script>
    </center>
</body>

</html>

Output:

HTML is the foundation of web pages and is used for webpage development by structuring websites and web apps. You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.

JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples.

How to Replace a JavaScript Alert Pop up with a fancy Alert Box ?

Abhishek7

Improve

Article Tags :

What are the types of Popup box available in JavaScript ?

Alert Box

Syntax:

Prompt Box

Syntax:

Confirm Box

Syntax:

Similar Reads

Thank You!

What kind of Experience do you want to share?