What are the types of Popup box available in JavaScript ?

In Javascript, popup boxes are used to display the message or notification to the user. There are three types of pop up boxes in JavaScript namely Alert Box, Confirm Box and Prompt Box.

Alert Box: It is used when a warning message is needed to be produced. When the alert box is displayed to the user, the user needs to press ok and proceed.

Syntax:

alert("your Alert here")

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:
Before pressing the button:

After pressing the button:

Prompt Box: It is a type of pop up box which is used to get the user input for further use. After entering the required details user have to click ok to proceed next stage else by pressing the cancel button user returning the null value.

Syntax:

prompt("your Prompt here")

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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"/>
  
        <!-- Promt box function -->
        <script>
            function geekPrompt() {
                var x = prompt("Enter your mail here : ");
                document.write("Your ID : " + x);
            }
        </script>
    </center>
</body>
  
</html>

chevron_right


Output:
Before pressing the button:

After pressing the button:

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

Syntax:

confirm("your query here")

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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 funtion -->
        <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>

chevron_right


Output:
Before pressing the button:

After pressing the button:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.