To make your website more beautiful, you can display the changes that occur on the website with an alert notification. These alerts are very useful when a form has been registered or edited, and can even be used to announce a new message. In this code, alerts have green, blue, orange and red colors that different colors are used for danger, success, information and warning. All of these alert notifications also have a close button.
HTML
<!-- This script got from www.devanswer.com -->
<div class="container">
<h2>Alert Messages</h2>
<p>Click on the "x" symbol to close the alert message.</p>
<div class="alert">
<span class="closebtn">×</span>
<strong>Danger!</strong> Indicates a dangerous or potentially negative action.
</div>
<div class="alert success">
<span class="closebtn">×</span>
<strong>Success!</strong> Indicates a successful or positive action.
</div>
<div class="alert info">
<span class="closebtn">×</span>
<strong>Info!</strong> Indicates a neutral informative change or action.
</div>
<div class="alert warning">
<span class="closebtn">×</span>
<strong>Warning!</strong> Indicates a warning that might need attention.
</div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
CSS
.alert {
padding: 20px;
background-color: #f44336;
color: white;
opacity: 1;
transition: opacity 0.6s;
margin-bottom: 15px;
}
.alert.success {
background-color: #04AA6D;
}
.alert.info {
background-color: #2196F3;
}
.alert.warning {
background-color: #ff9800;
}
.closebtn {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
.container {
width: 90%;
max-width: 100%;
padding: 15px;
margin: 0 auto;
}
.closebtn:hover {
color: black;
}Javascript
var close = document.getElementsByClassName("closebtn");
var i;
for (i = 0; i < close.length; i++) {
close[i].onclick = function(){
var div = this.parentElement;
div.style.opacity = "0";
setTimeout(function(){ div.style.display = "none"; }, 600);
}
}
