Open In App

What are the types of Popup box available in JavaScript ?

Last Updated : 15 Dec, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

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:

Table of Content

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: This example shows the implementation of the alert box.

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: 

ALertBox

Output

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 returns the null value.

Syntax:  

prompt("your Prompt here");

Example: This example shows the implementation of the Prompt box.

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: 

prompt

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 shows the implementation of the Confirm box. 

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: 

confirmBox

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.



Similar Reads

How to create Popup Box using HTML, CSS and JavaScript ?
In this article, we will see how to create a pop-up box with the help of HTML, CSS, and JavaScript. Here we will create a Popup box that is functional through the Popup button, when is clicked the Popbox appears on the screen with the title and close button. PrerequisitesHTMLCSSJavaScriptApproachCreate the Popup structure using HTML tags, Some tags
3 min read
How to create Popup box in React JS ?
Popup boxes, also known as modal or dialog boxes, are common UI elements used to display additional content or interactions on top of the main page. Creating a popup box in React can be achieved using various approaches, including libraries or custom implementations. We will use the Reactjs-popup library to Create Popup Box in React JS. Prerequisit
2 min read
How to Create Popup Box using HTML and CSS?
Popup boxes are a valuable tool for improving user experience on websites. A Popup (or dialog box) is a modal window used to inform, warn, or receive input from the user. Pop-up windows should not be used as they prevent the user from accessing other aspects of the program until the pop-up window is closed. In this create popup box in HTML and CSS
4 min read
Different Types of DOM Available to Access and Modify Content in JavaScript
The Document Object Model (DOM) enables developers to access and control web page elements using scripting languages like JavaScript, it is a crucial part of web development. There are various DOM types that can be accessed and modified with JavaScript. The various DOM types offered by JavaScript, their capabilities, and their applications in web d
3 min read
Difference between alert box and confirmation box in JavaScript
Both the boxes appear as a pop-up or you can call them pop-up box. There are three types of pop-up box, you can have basic knowledge by reading What are the types of Popup box available in JavaScript ? and JavaScript | Dialogue Boxes article. Alert BoxConfirmation BoxPrompt Box All of these popups open a modal window, meaning that the user cannot i
3 min read
How to change Input box borders after filling the box using JavaScript ?
In this article, we will change the input border after filling in the text on the input text field. The onchange event attribute works when the value of the element changes and selects the new value from the list. Approach: Whenever the input value is changed with some value by the user, the onchange event attribute is triggered. After the event is
2 min read
Difference between alert box and prompt box in JavaScript
1. Alert box : An alert box is one type of popup boxes in JavaScript which is often used to make sure that information have come through the user. So, the user will have to click "OK" to proceed when an alert box pops up on the window. Syntax : window.alert("message"); Another syntax to use alert box is : alert("message"); 2. Prompt box : It is als
2 min read
What are the different authentication types available in Postman?
Postman is an API(Application Programming Interface) development tool that helps to build test APIs. It is a very popular tool for testing, building, and modifying API. It has a very user-friendly interface for developers. It provides a user-friendly interface that allows developers to create, share, test, and document APIs efficiently. This tool i
3 min read
Semantic-UI Popup Types
Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to make your website look more amazing. It uses a class to add CSS to the elements. A popup displays extra facts about the element to the user when he/she hovers over it. Semantic UI
4 min read
Difference between -webkit-box-shadow &amp; box-shadow in CSS
In this article, we will find difference between 'webkit-box-shadow' &amp; 'box-shadow' in CSS. Webkit-box-shadow: The webkit-box-shadow property in CSS is used to apply a box-shadow. The webkit-box-shadow is a browser-specific implementation for WebKit browsers like Google Chrome and Safari. Syntax: webkit-box-shadow: h-offset v-offset blur; Advan
1 min read