"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 ----------> <body > <div id="note"> You smell good. <a id="close">[close]</a> </div> </body> </html>
#note { position: absolute; z-index: 6001; top: 0; left: 0; right: 0; background: #fde073; text-align: center; line-height: 2.5; overflow: hidden; -webkit-box-shadow: 0 0 5px black; -moz-box-shadow: 0 0 5px black; box-shadow: 0 0 5px black; } .cssanimations.csstransforms #note { -webkit-transform: translateY(-50px); -webkit-animation: slideDown 2.5s 1.0s 1 ease forwards; -moz-transform: translateY(-50px); -moz-animation: slideDown 2.5s 1.0s 1 ease forwards; } #close { position: absolute; right: 10px; top: 9px; text-indent: -9999px; background: url(images/close.png); height: 16px; width: 16px; cursor: pointer; } .cssanimations.csstransforms #close { display: none; } @-webkit-keyframes slideDown { 0%, 100% { -webkit-transform: translateY(-50px); } 10%, 90% { -webkit-transform: translateY(0px); } } @-moz-keyframes slideDown { 0%, 100% { -moz-transform: translateY(-50px); } 10%, 90% { -moz-transform: translateY(0px); } } </style>
<script> $("#close").click(function() { $("#note").hide(); }); </script>

Related: See More


Questions / Comments: