Popup Boxes in JavaScript

The following example demonstrates how the Popup Boxes in JavaScript work. Basically, JavaScript offers three popup boxes. In order to display a warning message, we use the alert popup box. It displays a warning message along with an OK button. In order to proceed further, the user requires to press the OK button.

Similarly, we have another popup box called the confirm box. Basically, we use the confirm popup box when we need to grant some permission to the user. For instance, suppose, the user is downloading a certain file. Then, a confirm popup box can display a confirmation message. Apart from the confirmation message, the confirm popup box also displays the OK and Cancel buttons. So, the operation is performed only when the user presses the OK button. Otherwise, it cancels that operation.

Likewise, we have a prompt popup box. Unlike the other two popup boxes, the prompt box accepts input from the user. Hence, we use the prompt box in order to take input values. Further, we can use the values elsewhere in the program.

The following HTML page contains JavaScript code that contains the above three popup boxes. Also, the input value that we retrieve from the user with the prompt box is displayed by an alert box.


Example to Demonstrate Popup Boxes in JavaScript

    <title>Popup Boxes in JavaScript</title>
       alert("This is an example of alert box!");
       confirm("It is a Confirm popup box!");
       var myvariable=prompt("This is a prompt box!", "Enter someting....");
       alert("You have entered: "+myvariable);
     <div style="text-align:center;">
       <h1>JavaScript Example to Demonstrate Popup Boxes!</h1>


An Example of Popup Boxes in JavaScript - alert box
An Example of Popup Boxes in JavaScript – alert box
Confirm Popup Box
Confirm Popup Box
The Prompt Popup Box to Accept Input from User
The Prompt Popup Box to Accept Input from User

Further Reading

Evolution of JavaScript from ES1 to ES2020

Introduction to HTML DOM Methods in JavaScript

JavaScript Practice Exercise

Understanding HTTP Requests and Responses

What is Asynchronous JavaScript?

Understanding JSON Web Tokens

JavaScript Code for Event Handling

Callback Functions in JavaScript

Arrow Functions in JavaScript

Understanding Document Object Model (DOM) in JavaScript

JavaScript Code Examples

Show or Hide TextBox when Selection Changed in JavaScript

Changing Style of HTML Elements using getElementsByClassName() Method

Creating Classes in JavaScript


You may also like...