Do not miss this exclusive book on Binary Tree Problems. Get it now for free.

Reading time: 20 minutes | Coding time: 5 minutes

In order to make our websites more functional and interactive javascript provides us with pop up boxes .These pop up boxes can be used for various tasks and provides a much better interactive and efficient way to communicate with the user.

There are three popup boxes provided by JavaScript:

Alert
Confirm
Prompt

Alert Popup Box

The alert popup box is basically used to popup a message or a warning for the user.We can assume that an alert box is similar to a print function which we have used in languages like C,C++,java and python.The main purpose of the alert function is to display a message to the user containing any important information.

Syntax:

alert("your message here")

Example of Alert Popup box

Following HTML code demonstrates how to use Alert popup box:

<!DOCTYPE html>
<html>
    <head>
        <title>Javascript alert box example</title>
    </head>
    <body>
        <h1>Hello World!!!</h1>
        <script type="text/javascript">
            alert("This is an alert box."); 
        </script>
    </body>
</html>

This is how an alert box looks like:

Confirm Popup Box

The confirm popup box is used to display a message to the user/s asking for their confirmation to proceed with an event which they have triggered.An example on the confirm box would be the popup which appears in your browser to save your login credentials which to entered or a box which appears when you are being redirected to a new page.The confirm popup box allows the user to make a choice by providing you with two button or options to choose from.The two buttons which the confirm box provides are "Ok" and "Cancel".When you click on the button the task linked to the clicked button in performed.

Syntax

confirm("Your message here.")

Example of Confirm Popup Box

Following HTML code demonstrates how to use Confirm popup box:

<!DOCTYPE html>
<html>
    <head>
        <title>Javascript Confirm box example</title>
    </head>
    <body>
        <h1>Hello World!!!</h1>
        <script type="text/javascript">
            confirm("This is a confirm box"); 
        </script>
    </body>
</html>

This is how a confirm popup box looks like:

Prompt Popup box

The Prompt popup box is a way to display a message and get data from the user.The prompt box is used as a means to get a single data from the user which might be used to perform tasks based on the answer.The prompt box can be used for tasks like asking the name of the user or age,gender etc.The prompt() functions returns the data provided by the user which can be directly used or saved in a variable to be used later.

Syntax

prompt("Your message here")

Example of Prompt popup Box

Following HTML code demonstrates how to use Prompt popup box:

<!DOCTYPE html>
<html>
    <head>
        <title>Javascript Prompt Box example</title>
    </head>
    <body>
        <script type="text/javascript">
            name = prompt("What is  your name ? ")
            if(name != null && name != "")
            alert("Welcome : "+name);
            else 
            alert("Welcome Unknown!!")
        </script>
    </body>
</html>

This is how a Prompt popup box looks like:

Comparing Alert, Confirm and Prompt popup boxes

Go through these details to understand when to use Alert, Confirm and Prompt boxes and the differences between them.

Alert popup Box

Description: Used to show a message or warning .
Input Field: None
Buttons: Only a single “OK” button is provided.
When to use?: When we need to print a warning/message for the user to alert him about his/her action.
Example: An alert box displayed when you are being redirected to another page

Confirm popup Box

Description: Used to take confirmation to proceed with an event.
Input Field: None
Buttons: Two botton are provided “OK” and “Cancel”.
When to use?: When we need to take a confirmation from the user to proceed with an event like redirecting to another page etc.
Example: A confirm box displayed by a website to show you notifications with an “OK” and “Cancel” button.

Prompt popup Box

Description :Used to take a single input from the user and proceed with event depending upon the input.
Input Field :Single input field(the input in treated as string or null if user does not enter anything).
Buttons :Two buttons are provided “OK” and “Cancel”.
When to use? :When we need to take a confirmation from the user to proceed with an event like redirecting to another page etc.
Example :A prompt box displayed by a website to get your name or age.

With this, you have the complete knowledge of the different popup boxes in HTML/ JavaScript and how to use them. Try it out and enjoy.