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 I can show JavaScript alert box in the middle of the screen?
The native JavaScript alert() box cannot be repositioned as its styling and position are controlled by the browser. To show an alert box in the center of the screen, you need to create a custom alert dialog using HTML, CSS, and JavaScript.
Why Native alert() Can't Be Centered
The built-in alert() function displays a browser-controlled modal that appears at a fixed position determined by the browser, typically near the top of the viewport. This position cannot be customized through CSS or JavaScript.
Creating a Custom Centered Alert Box
Here's how to create a custom alert that appears perfectly centered on the screen:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
#customAlert {
display: none;
background-color: #F3F5F6;
color: #000000;
border: 2px solid #aaa;
border-radius: 8px;
position: fixed;
width: 300px;
height: 120px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
text-align: center;
z-index: 9999;
padding: 20px;
box-sizing: border-box;
}
#customAlert .message {
margin-bottom: 15px;
font-size: 14px;
}
#customAlert button {
background-color: #007cba;
color: white;
border: none;
border-radius: 4px;
padding: 8px 16px;
cursor: pointer;
font-size: 14px;
}
#customAlert button:hover {
background-color: #005a87;
}
.overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
z-index: 9998;
}
.demo-button {
background-color: #28a745;
color: white;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
margin: 20px;
}
</style>
</head>
<body>
<div class="overlay" id="overlay"></div>
<div id="customAlert">
<div class="message">This is a custom centered alert!</div>
<button class="ok-button">OK</button>
</div>
<button class="demo-button" onclick="showCenteredAlert('Hello! This is a centered alert box.')">
Show Centered Alert
</button>
<script>
function showCenteredAlert(message) {
const alertBox = document.getElementById('customAlert');
const overlay = document.getElementById('overlay');
const messageDiv = alertBox.querySelector('.message');
const okButton = alertBox.querySelector('.ok-button');
messageDiv.textContent = message;
overlay.style.display = 'block';
alertBox.style.display = 'block';
okButton.onclick = function() {
alertBox.style.display = 'none';
overlay.style.display = 'none';
};
}
</script>
</body>
</html>
Key CSS Properties for Perfect Centering
The critical CSS properties that center the alert box are:
position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
The transform: translate(-50%, -50%) shifts the element back by half its own width and height, achieving perfect centering regardless of the alert box dimensions.
Alternative Method Using Flexbox
You can also center the alert using flexbox on a full-screen container:
.alert-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0,0,0,0.5);
}
Comparison of Centering Methods
| Method | Browser Support | Responsive | Complexity |
|---|---|---|---|
| Transform translate | IE9+ | Yes | Medium |
| Flexbox | IE11+ | Yes | Low |
| Fixed percentages | All browsers | No | High |
Conclusion
Since native alert() cannot be repositioned, create custom alert dialogs using HTML and CSS. Use transform: translate(-50%, -50%) with position: fixed for perfect centering that works across all screen sizes.
2K+ Views
