<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 ----------> <div class="page-alerts container-fluid"> <div class="alert alert-info page-alert" id="alert-2"> <button type="button" class="close"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <strong>Heads up!</strong> This alert needs your attention, but it's not super important. </div> </div> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="row"> <div class="col-md-2"><button data-toggle="page-alert" data-toggle-id="2" class="btn btn-info btn-block">Show info</button></div> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />asdfasd <br /><br /><br /><br /><br />asdfsdf </div> </div> </div> </div>

button { margin-bottom: 3px; } /* REQUIRED */ .page-alerts { margin-bottom: 20px; } .page-alerts .page-alert { border-radius: 0; margin-bottom: 0; position: fixed; top:0; left:0; z-index:100000; width:100%; }

$(function() { $('.page-alert').hide(); //Show alert $('button[data-toggle="page-alert"]').click(function(e) { e.preventDefault(); var id = $(this).attr('data-toggle-id'); var alert = $('#alert-' + id); var timeOut; alert.appendTo('.page-alerts'); alert.slideDown(); //Is autoclosing alert var delay = $(this).attr('data-delay'); if(delay != undefined) { delay = parseInt(delay); clearTimeout(timeOut); timeOut = window.setTimeout(function() { alert.slideUp(); }, delay); } }); //Close alert $('.page-alert .close').click(function(e) { e.preventDefault(); $(this).closest('.page-alert').slideUp(); }); });