HTML Alert Message Box
Learn how to create an alert message box using HTML, CSS and JavaScript.
We use alert messages to inform users about something. In this example, we have Info, Successful, Warning and Error messages. It is easy to add more.
✕ Info!This is an informational alert.
✕ Successful!This is a successful alert.
✕ Warning!This is a warning alert.
✕ Error!This is an error alert.
Notice in the HTML, on line 1, the class is 'alert-i', this is the informational box. For the warning box, change it to 'alert-w'.
- alert-i = Informational
- alert-s = Successful
- alert-w = Warning
- alert-e = Error
<div class="alert-i">
<a class="a-close-btn">✕</a>
<strong class="a-title">Info!</strong>This is an informational alert.
</div>
/* Informational */
.alert-i {
/* Color: Aqua (blue) */
background-color: #0096FF;
}
/* Successful */
.alert-s {
/* Color: Moss (green) */
background-color: #009051;
}
/* Warning */
.alert-w {
/* Color: Tangerine (orange) */
background-color: #FF9300;
}
/* Error */
.alert-e {
/* Color: Maraschino (red) */
background-color: #FF2600;
}
/* Style the alert by finding all elements with a class attribute starting with alert- */
[class^='alert-'] {
opacity: 1;
color: white;
padding: 16px;
transition: opacity 0.5s;
/*font-family: 'Open Sans', sans-serif;*/
}
/* Add spacing to the end of the title */
[class^='alert-'] .a-title {
margin-right: 6px;
}
/* Close button */
[class^='alert-'] .a-close-btn {
color: white;
float: right;
line-height: 2;
font-size: 18px;
font-weight: bold;
transition: 0.3s;
margin-top: -7px;
padding: 0 10px 0 11px;
cursor: pointer;
border-radius: 50%;
text-decoration: none;
}
/* Close button hover */
[class^='alert-'] .a-close-btn:hover {
color: white;
background-color: rgba(0, 0, 0, 0.2);
}
// Find all alert elements by looking for classes that start with "alert-"
document.querySelectorAll("[class*=alert-]").forEach(el => {
// Get the a element and add the on click event to close the alert
var a = el.querySelector("a");
if (a) a.onclick = closeAlert;
});
// Close the alert
function closeAlert() {
// 'this' is the a element so we need to get its parent and turn it off
var el = this.parentElement;
if (el) {
// Set the opacity to 0 so it fades out
el.style.opacity = "0";
// Turn if off after a short delay so we see it fade out
setTimeout(function () {
el.style.display = "none";
}, 500);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
/* Informational */
.alert-i {
/* Color: Aqua (blue) */
background-color: #0096FF;
}
/* Successful */
.alert-s {
/* Color: Moss (green) */
background-color: #009051;
}
/* Warning */
.alert-w {
/* Color: Tangerine (orange) */
background-color: #FF9300;
}
/* Error */
.alert-e {
/* Color: Maraschino (red) */
background-color: #FF2600;
}
/* Style the alert by finding all elements with a class attribute starting with alert- */
[class^='alert-'] {
opacity: 1;
color: white;
padding: 16px;
margin: g2sAttr(margin);
transition: opacity 0.5s;
/* font-family: 'Open Sans', sans-serif; */
}
/* Add spacing to the end of the title */
[class^='alert-'] .a-title {
margin-right: 6px;
}
/* Close button */
[class^='alert-'] .a-close-btn {
color: white;
float: right;
line-height: 2;
font-size: 18px;
font-weight: bold;
transition: 0.3s;
margin-top: -7px;
padding: 0 10px 0 11px;
cursor: pointer;
border-radius: 50%;
text-decoration: none;
}
/* Close button hover*/
[class^='alert-'] .a-close-btn:hover {
color: white;
background-color: rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<!-- Snippet Template -->
<snippet-template type="i" margin="0 0 16px 0" title="Title" description="This is the description">
</snippet-template>
<!-- Alert -->
<div class="alert-{{type}}">
<a class="a-close-btn">✕</a>
<strong class="a-title">{{title}}</strong>{{description}}
</div>
<script>
// Find all alert elements by looking for classes that start with "alert-"
document.querySelectorAll("[class*=alert-]").forEach(el => {
// Get the a element and add the on click event to close the alert
var a = el.querySelector("a");
if (a) a.onclick = closeAlert;
});
// Close the alert
function closeAlert() {
// 'this' is the a element so we need to get its parent and turn it off
var el = this.parentElement;
if (el) {
// Set the opacity to 0 so it fades out
el.style.opacity = "0";
// Turn if off after a short delay so we see it fade out
setTimeout(function () {
el.style.display = "none";
}, 500);
}
}
</script>
</body>
</html>