Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Explain Popup Message using Event?
We can show the popup message to the app users using the popup box. We will learn about the different types of JavaScript popup boxes in this tutorial.
There are three different types of popup boxes available in JavaScript below.
Alert box
Confirm box
Prompt box
We will learn about all popup boxes one by one below.
Alert Box
We can show the alert box using the window.alert() method. It simply shows the message in the popup box.
We can use the alert box when we need to give some message to the users. For example, when the user logs in to the app, it shows a message like “You logged in successfully.”
Syntax
Users can follow the syntax below to show the alert box in JavaScript.
alert(message)
Parameters
message − It is a message to show inside the alert box.
Example
In this example, we are invoking the showAlert() function when the user clicks the button. The showAlert() function uses the alert() method to show the alert box.
In the output, users can observe that when we press the button, it shows the alert box with the message passed as a parameter. It disappears when we press the ‘ok’ button in the alert box.
<html>
<body>
<h2> Showing the alert message using the <i> alert box. </i> </h2>
<button onclick = "showAlert()"> Show Alert Message </button>
</body>
<script>
// function to show alert
function showAlert() {
alert("This is the important message");
}
</script>
</html>
Confirm Box
We can use the confirm box when we need confirmation from the user. For example, we need confirmation from the user before deleting some important data.
We can show the confirmation box using the window.confirm() method. The confirm box contains the two buttons containing the text ok and cancel. If the user presses the cancel button, it returns false; otherwise true.
Syntax
Users can follow the syntax below to show the confirm box in JavaScript.
confirm(message);
Parameters
message − It is a confirmation message to show in the confirm box.
Return value
It returns the true and false boolean values based on whether the user presses the ok or cancel button.
Example
In this example, we used the confirm() method of the window object to show the confirm box. Also, we are showing a different message to the user on the screen according to the user pressing the ok or cancel button of the confirm box.
<html>
<body>
<h2> Showing the confirm box using the <i> confirm() </i> method.</h2>
<p id = "output"> </p>
<button onclick = "showConfirm()"> Show Confirm box </button>
</body>
<script>
let message = "Kindly confirm once by pressing the ok or cancel button!";
// function to show confirm box
function showConfirm() {
// showing the confirm box with the message parameter
let returnValue = confirm(message);
let output = document.getElementById("output");
// According to the returned boolean value, show the output
if (returnValue) {
output.innerHTML += "You pressed the ok button.";
} else {
output.innerHTML += "You pressed the cancel button.";
}
}
</script>
</html>
Prompt Box
The prompt box is the third way to show the popup message in JavaScript. The prompt box is the advanced version of the alert() and confirms box. It shows the message on the box and takes the user's input. Also, it contains the ok and cancel buttons to submit the input value.
Syntax
Users can follow the syntax below to use the prompt box to take the user input in JavaScript.
prompt(message, placeholder);
We have invoked the static prompt () method in the above syntax.
Parameters
message − It is a message to show above the input box.
Placeholder − It is a text to show in the input box.
Return value
It returns the input values if the user presses the ok button; otherwise null.
Example
In this example, we have created the takeInput() function, which shows the prompt box to the user. We used the prompt box to take the name input from the user.
We show the user’s input on the screen when the user presses the ok button after entering the input value.
<html>
<body>
<h2> Showing the prompt box using the <i> prompt() </i> method. </h2>
<p id = "output"> </p>
<button onclick = "takeInput()"> Show Prompt box </button>
</body>
<script>
let message = "Enter your name";
// function to take input using the prompt box
function takeInput() {
// showing the prompt with the message parameter
let returnValue = prompt(message, "Shubham");
let output = document.getElementById("output");
if (returnValue) {
output.innerHTML += "Your good name is " + returnValue;
} else {
output.innerHTML +=
"You pressed the cancel button, or you entered the null value";
}
}
</script>
</html>
We have learned all three different popup boxes with the examples in this tutorial. We can use the alert box if we need to show only the message, and we should use the confirm box if we need only confirmation from the users. We should use the prompt box if we require an input value or confirmation with some value in the popup box.
615 Views
