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
How to customize the position of an alert box using JavaScript?
To customize the position of an alert box, you need to create a custom alert since the native JavaScript alert() function cannot be positioned. We can build a custom alert box using HTML, CSS, and JavaScript, then control its position using CSS properties like top and left.
Creating a Custom Alert Box
The native alert() box position is controlled by the browser and cannot be customized. Instead, we create a custom modal dialog that mimics an alert box behavior.
Example: Custom Positioned Alert
Here's how to create a custom alert box with customizable positioning:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
function functionAlert(msg, myYes) {
var confirmBox = $("#confirm");
confirmBox.find(".message").text(msg);
confirmBox.find(".yes").unbind().click(function() {
confirmBox.hide();
});
confirmBox.find(".yes").click(myYes);
confirmBox.show();
}
</script>
<style>
#confirm {
display: none;
background-color: #F3F5F6;
color: #000000;
border: 1px solid #aaa;
position: fixed;
width: 300px;
height: 100px;
left: 30%;
top: 30%;
box-sizing: border-box;
text-align: center;
z-index: 1000;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
#confirm button {
background-color: #FFFFFF;
display: inline-block;
border-radius: 12px;
border: 4px solid #aaa;
padding: 5px;
text-align: center;
width: 60px;
cursor: pointer;
}
#confirm .message {
text-align: center;
padding: 15px;
font-weight: bold;
}
</style>
</head>
<body>
<div id="confirm">
<div class="message">This is a warning message.</div>
<button class="yes">OK</button>
</div>
<input type="button" value="Click Me" onclick="functionAlert('Custom positioned alert!', function(){ console.log('Alert closed'); });" />
</body>
</html>
Key Positioning Properties
The positioning is controlled by these CSS properties:
- position: fixed - Positions relative to the viewport
- top: 30% - Vertical position from top of screen
- left: 30% - Horizontal position from left of screen
- z-index: 1000 - Ensures alert appears above other elements
Alternative Positioning Methods
You can customize the position using different approaches:
/* Center the alert box */
#confirm {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* Top-right corner */
#confirm {
position: fixed;
top: 20px;
right: 20px;
}
/* Bottom-left corner */
#confirm {
position: fixed;
bottom: 20px;
left: 20px;
}
Dynamic Positioning with JavaScript
You can also change the alert position dynamically:
function showAlertAt(message, x, y) {
var alertBox = document.getElementById('confirm');
alertBox.querySelector('.message').textContent = message;
alertBox.style.left = x + 'px';
alertBox.style.top = y + 'px';
alertBox.style.display = 'block';
}
// Show alert at specific coordinates
showAlertAt('Alert at position 100,200', 100, 200);
Conclusion
Since native JavaScript alerts cannot be positioned, creating a custom alert box with CSS positioning gives you full control over placement. Use position: fixed with top and left properties to achieve the desired positioning.
3K+ Views
