"alert"
Bootstrap 3.2.0 Snippet by escapedlion

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ----------> <!DOCTYPE html> <html> <head> <title>Cool notification messages with CSS3 & Jquery demo - Redteamdesign</title> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script> var myMessages = ['info','warning','error','success']; // define the messages types function hideAllMessages() { var messagesHeights = new Array(); // this array will store height for each for (i=0; i<myMessages.length; i++) { messagesHeights[i] = $('.' + myMessages[i]).outerHeight(); $('.' + myMessages[i]).css('top', -messagesHeights[i]); //move element outside viewport } } function showMessage(type) { $('.'+ type +'-trigger').click(function(){ hideAllMessages(); $('.'+type).animate({top:"0"}, 500); }); } $(document).ready(function(){ // Initially, hide them all hideAllMessages(); // Show message for(var i=0;i<myMessages.length;i++) { showMessage(myMessages[i]); } // When message is clicked, hide it $('.message').click(function(){ $(this).animate({top: -$(this).outerHeight()}, 500); }); }); </script> <style> body { margin: 0; padding: 0; font: 12px Arial, Helvetica, sans-serif; background: #f1f1f1; } .message { -webkit-background-size: 40px 40px; -moz-background-size: 40px 40px; background-size: 40px 40px; background-image: -webkit-gradient(linear, left top, right bottom, color-stop(.25, rgba(255, 255, 255, .05)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .05)), color-stop(.75, rgba(255, 255, 255, .05)), color-stop(.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%, transparent 75%, transparent); background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%, transparent 75%, transparent); background-image: linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%, transparent 75%, transparent); -moz-box-shadow: inset 0 -1px 0 rgba(255,255,255,.4); -webkit-box-shadow: inset 0 -1px 0 rgba(255,255,255,.4); box-shadow: inset 0 -1px 0 rgba(255,255,255,.4); width: 100%; border: 1px solid; color: #fff; padding: 15px; position: fixed; _position: absolute; text-shadow: 0 1px 0 rgba(0,0,0,.5); -webkit-animation: animate-bg 5s linear infinite; -moz-animation: animate-bg 5s linear infinite; } .info { background-color: #4ea5cd; border-color: #3b8eb5; } .error { background-color: #de4343; border-color: #c43d3d; } .warning { background-color: #eaaf51; border-color: #d99a36; } .success { background-color: #61b832; border-color: #55a12c; } .message h3 { margin: 0 0 5px 0; } .message p { margin: 0; } @-webkit-keyframes animate-bg { from { background-position: 0 0; } to { background-position: -80px 0; } } @-moz-keyframes animate-bg { from { background-position: 0 0; } to { background-position: -80px 0; } } #trigger-list { text-align: center; margin: 100px 0; padding: 0; } #trigger-list li { display: inline-block; *display: inline; zoom: 1; } #trigger-list .trigger { display: inline-block; background: #ddd; border: 1px solid #777; padding: 10px 20px; margin: 0 5px; font: bold 12px Arial, Helvetica; text-decoration: none; color: #333; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } #trigger-list .trigger:hover { background: #f5f5f5; } /*--------------------------------------*/ .centered { text-align: center; } .twitter-follow-button { position: relative; top: 7px; } </style> </head> <body> <div class="info message"> <h3>FYI, something just happened!</h3> <p>This is just an info notification message.</p> </div> <div class="error message"> <h3>Ups, an error ocurred</h3> <p>This is just an error notification message.</p> </div> <div class="warning message"> <h3>Wait, I must warn you!</h3> <p>This is just a warning notification message.</p> </div> <div class="success message"> <h3>Congrats, you did it!</h3> <p>This is just a success notification message.</p> </div> <ul id="trigger-list"> <li><a href="#" class="trigger info-trigger">Info</a></li> <li><a href="#" class="trigger error-trigger">Error</a></li> <li><a href="#" class="trigger warning-trigger">Warning</a></li> <li><a href="#" class="trigger success-trigger">Success</a></li> </ul> </body> </html>

Related: See More


Questions / Comments: