<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 id="notzi"></div><!-- HERE IS WHERE THE NOTY WILL APPEAR--> <div class="container"> <p>This is a test</p> </div>

#notzi { max-width: 600px; margin: 0 auto; top: 0; left: 0; right: 0; font-weight: bold; z-index: 1031; text-align: center; position: fixed; } .alert { margin-bottom: 2px; border-radius: 0px; }

function notzi(message, type) { var html = '<div class="alert alert-' + type + ' alert-dismissable page-alert">'; html += '<button type="button" class="close"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>'; html += message; html += '</div>'; $(html).hide().prependTo('#notzi').slideDown(200); }; $( function () { notzi('test', 'info'); notzi('success', 'success'); notzi('warning', 'warning'); notzi('danger', 'danger'); notzi('info', 'info'); $('.page-alert .close').click( function(e) { e.preventDefault(); $(this).closest('.page-alert').slideUp(200); }); });