"Alert Bar / Notification Bar by KTommy (Oat Chats)"
Bootstrap 3.0.0 Snippet by KTommy

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="alert"> <span class="closebtn" onclick="this.parentElement.style.display='none';">×</span> This is an alert box. </div>
/* The alert message box */ .alert { padding: 20px; background-color: #f44336; /* Red */ color: white; margin-bottom: 15px; } /* The close button */ .closebtn { margin-left: 15px; color: white; font-weight: bold; float: right; font-size: 22px; line-height: 20px; cursor: pointer; transition: 0.3s; } /* When moving the mouse over the close button */ .closebtn:hover { color: black; }
// Get all elements with class="closebtn" var close = document.getElementsByClassName("closebtn"); var i; // Loop through all close buttons for (i = 0; i < close.length; i++) { // When someone clicks on a close button close[i].onclick = function(){ // Get the parent of <span class="closebtn"> (<div class="alert">) var div = this.parentElement; // Set the opacity of div to 0 (transparent) div.style.opacity = "0"; // Hide the div after 600ms (the same amount of milliseconds it takes to fade out) setTimeout(function(){ div.style.display = "none"; }, 600); } }

Related: See More


Questions / Comments: