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 set the width and height of a JavaScript alert box?
JavaScript's native alert() function creates a browser-controlled dialog box whose size cannot be customized. To set the width and height of an alert box, you need to create a custom alert dialog using HTML, CSS, and JavaScript.
Why Native alert() Cannot Be Resized
The browser's built-in alert() function creates a modal dialog with fixed dimensions determined by the browser and operating system. These native alerts cannot be styled or resized using CSS or JavaScript.
Creating a Custom Alert Box
Here's how to create a customizable alert box with specific width and height dimensions using jQuery:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script>
function customAlert(msg) {
var alertBox = $("#custom-alert");
alertBox.find(".message").text(msg);
alertBox.find(".ok-btn").unbind().click(function() {
alertBox.hide();
});
alertBox.show();
}
</script>
<style>
#custom-alert {
display: none;
background-color: #F3F5F6;
color: #000000;
border: 2px solid #aaa;
border-radius: 8px;
position: fixed;
width: 400px;
height: 150px;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -75px;
padding: 20px;
box-sizing: border-box;
text-align: center;
font-family: Arial, sans-serif;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
#custom-alert button {
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
padding: 10px 20px;
cursor: pointer;
font-size: 16px;
margin-top: 20px;
}
#custom-alert button:hover {
background-color: #45a049;
}
#custom-alert .message {
margin-bottom: 15px;
font-size: 18px;
}
</style>
</head>
<body>
<div id="custom-alert">
<div class="message"></div>
<button class="ok-btn">OK</button>
</div>
<button onclick="customAlert('This is a custom alert with width: 400px and height: 150px!')">
Show Custom Alert
</button>
</body>
</html>
Key CSS Properties for Sizing
The width and height are controlled by these CSS properties:
- width: 400px - Sets the alert box width
- height: 150px - Sets the alert box height
- margin-left: -200px - Centers horizontally (negative half of width)
- margin-top: -75px - Centers vertically (negative half of height)
Pure JavaScript Alternative
You can also create a custom alert without jQuery:
<!DOCTYPE html>
<html>
<head>
<style>
.alert-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
z-index: 1000;
}
.alert-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 350px;
height: 120px;
background: white;
border-radius: 8px;
padding: 20px;
text-align: center;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
</style>
</head>
<body>
<div id="alert-overlay" class="alert-overlay">
<div class="alert-box">
<p id="alert-message"></p>
<button onclick="closeAlert()">OK</button>
</div>
</div>
<button onclick="showAlert('Custom alert: 350px × 120px')">Show Alert</button>
<script>
function showAlert(message) {
document.getElementById('alert-message').textContent = message;
document.getElementById('alert-overlay').style.display = 'block';
}
function closeAlert() {
document.getElementById('alert-overlay').style.display = 'none';
}
</script>
</body>
</html>
Conclusion
Native JavaScript alert() boxes cannot be resized, but you can create custom alert dialogs with specific dimensions using HTML, CSS, and JavaScript. The width and height are controlled through CSS properties, allowing complete customization of appearance and behavior.
4K+ Views
