JavaScript popup boxes provide easy ways to communicate with users through prompts, confirmations, and alert messages. It is a crucial component of web development. These popups act as a communication channel between the user and the website. It is used to asking for feedback, sending notifications, or requiring action from the user before continuing. In this article, we will learn about these popup boxes & its use with examples.
Types of JavaScript Popup Boxes
JavaScript provides three main types of popup boxes:
- Alert Box
- Confirm Box
- Prompt Box
Each popup box used for a different purpose and also based on specific requirements in a web application.
1. Alert Box
The most basic type of popup that is used to inform or warn the user is called an alert box. It stops the code from running until the user clicks the "OK" button to acknowledge the message.
Syntax
alert("This is an alert box!");
Example
function showAlert()
{
alert("Wlecome to our learning junction");
}
2. Confirm Box
Before taking any action, the user's approval is obtained via a confirm box. It has two buttons: Cancel and OK. The function returns true if the user clicks "OK" and false otherwise.
Syntax
confirm("Are you sure you want to proceed?");
Example
function confirmAction()
{
let userconf = confirm("Are you sure to delete this item?");
if (userconf)
{
alert("Item deleted.");
}
else
{
alert("Action canceled.");
}
}
3. Prompt Box
The user can enter information in a prompt box before continuing. In addition to two buttons (OK and Cancel), it has a text area for user input.
Syntax
prompt("Please enter your name:");
Example
function getUserInput()
{
let age = prompt("What is your age?");
if (age > 18)
{
alert("You are eligible for voting!");
}
else
{
alert("You are not eligible for voting!");
}
}
Also read about JavaScript Array
Customizing Popup Boxes
Because JavaScript popup boxes are a component of the browser user interface, they are by default not styleable with CSS. But you can use HTML, CSS, and JavaScript to make your own popup modals.
Creating a Custom Popup
For an improved user experience, you may use HTML, CSS, and JavaScript to construct a bespoke modal instead of relying on built-in JavaScript popups.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Popup</title>
<style>
#customPopup {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
padding: 20px;
border: 1px solid black;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<button onclick="showPopup()">Show Popup</button>
<div id="customPopup">
<p>This is a custom popup box!</p>
<button onclick="closePopup()">Close</button>
</div>
<script>
function showPopup()
{
document.getElementById("customPopup").style.display = "block";
}
function closePopup()
{
document.getElementById("customPopup").style.display = "none";
}
</script>
</body>
</html>
When to Use JavaScript Popup Boxes
| Advantages | Disadvantages |
| Simple to implement | Limited customization |
| Built into the browser | Can be disruptive to user experience |
| Effective for important notifications | May be blocked by browser settings |
Conclusion
Popup boxes using JavaScript are helpful for seeking input, delivering messages, and obtaining user confirmation. Custom modals improve the user experience and offer greater flexibility than built-in popups. Gaining proficiency with popups will enhance user interactions and your web development abilities.
