Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Explain Popup Message using Event?
We can show popup messages to app users using JavaScript popup boxes. There are three different types of popup boxes available in JavaScript that trigger through events like button clicks.
The three types of popup boxes are:
Alert box - Shows a simple message
Confirm box - Asks for user confirmation
Prompt box - Collects user input
Let's explore each popup type with event-driven examples.
Alert Box
The alert box displays a simple message to users. It's commonly used for notifications like "Login successful" or important warnings. The alert box has only an "OK" button to dismiss it.
Syntax
alert(message)
Parameters
message - The text message to display in the alert box
Example
This example shows an alert box when the button is clicked. The alert displays a message and blocks further interaction until dismissed.
<html>
<body>
<h2>Showing Alert Message Using Event</h2>
<button onclick="showAlert()">Show Alert Message</button>
<p id="status"></p>
<script>
function showAlert() {
// Show alert box
alert("This is an important message!");
// Update status after alert is dismissed
document.getElementById("status").innerHTML = "Alert was shown and dismissed.";
}
</script>
</body>
</html>
Confirm Box
The confirm box asks users for confirmation before proceeding with an action. It returns true if "OK" is clicked, or false if "Cancel" is clicked. This is ideal for delete confirmations or important decisions.
Syntax
confirm(message)
Parameters
message - The confirmation question to display
Return Value
Returns true if "OK" is clicked, false if "Cancel" is clicked.
Example
This example uses a confirm box to get user confirmation and responds differently based on their choice.
<html>
<body>
<h2>Confirm Box with Event Handling</h2>
<p id="output"></p>
<button onclick="showConfirm()">Delete File</button>
<script>
function showConfirm() {
let message = "Are you sure you want to delete this file?";
let userChoice = confirm(message);
let output = document.getElementById("output");
if (userChoice) {
output.innerHTML = "<span style='color: red;'>File deleted successfully!</span>";
} else {
output.innerHTML = "<span style='color: green;'>File deletion cancelled.</span>";
}
}
</script>
</body>
</html>
Prompt Box
The prompt box collects text input from users. It displays a message, an input field, and OK/Cancel buttons. It returns the entered text if "OK" is clicked, or null if "Cancel" is clicked or no input is provided.
Syntax
prompt(message, defaultText)
Parameters
message - The text to display above the input field
defaultText - Optional default text in the input field
Return Value
Returns the entered text string if "OK" is clicked, or null if "Cancel" is clicked.
Example
This example uses a prompt box to collect the user's name and displays a personalized message.
<html>
<body>
<h2>Prompt Box for User Input</h2>
<p id="output"></p>
<button onclick="takeInput()">Enter Your Name</button>
<script>
function takeInput() {
let userName = prompt("Please enter your name:", "Guest");
let output = document.getElementById("output");
if (userName !== null && userName.trim() !== "") {
output.innerHTML = "<h3>Hello, " + userName + "! Welcome to our website.</h3>";
} else {
output.innerHTML = "<p style='color: orange;'>No name entered or cancelled.</p>";
}
}
</script>
</body>
</html>
Comparison of Popup Types
| Popup Type | Purpose | Return Value | Use Case |
|---|---|---|---|
alert() |
Show message | None (undefined) | Notifications, warnings |
confirm() |
Get confirmation | true/false | Delete confirmations, decisions |
prompt() |
Collect input | string/null | User registration, data entry |
Conclusion
JavaScript popup boxes provide simple ways to interact with users through events. Use alert() for messages, confirm() for yes/no decisions, and prompt() for collecting user input. Each popup type serves specific interaction needs in web applications.
980 Views
