<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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"> <div class="alert alert-success page-alert" id="alert-1"> <button type="button" class="close"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <strong>Well done!</strong> You successfully read this important alert message. </div> <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 class="alert alert-warning page-alert" id="alert-3"> <button type="button" class="close"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <strong>Warning!</strong> Best check yo self, you're not looking too good. </div> <div class="alert alert-danger page-alert" id="alert-4"> <button type="button" class="close"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <strong>Oh snap!</strong> Change a few things up and try submitting again. </div> <div class="alert alert-success page-alert" id="alert-5"> <button type="button" class="close"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <strong>Cool!</strong> This alert will close in 3 seconds. The data-delay attribute is in milliseconds. </div> </div> <div class="container"> <div class="row"> <div class="col-md-12"> <h2>Page Alerts</h2> <hr> <p>Click a button to show an alert.<br><br>Made with <i class="fa fa-fw fa-heart text-danger"></i> by   <a class="btn btn-primary btn-xs" href="http://twitter.com/AlexMahrt" target="_blank"><i class="fa fa-fw fa-twitter"></i> @AlexMahrt</a><br><br></p> <hr> <div class="row"> <div class="col-md-2"><button data-toggle="page-alert" data-toggle-id="1" class="btn btn-success btn-block">Show success</button></div> <div class="col-md-2"><button data-toggle="page-alert" data-toggle-id="2" class="btn btn-info btn-block">Show info</button></div> <div class="col-md-2"><button data-toggle="page-alert" data-toggle-id="3" class="btn btn-warning btn-block">Show warning</button></div> <div class="col-md-2"><button data-toggle="page-alert" data-toggle-id="4" class="btn btn-danger btn-block">Show danger</button></div> <div class="col-md-2"><button data-toggle="page-alert" data-delay="3000" data-toggle-id="5" class="btn btn-info btn-block">Auto closing alert</button></div> <div class="col-md-2"><button class="btn btn-default btn-block clear-page-alerts">Clear all</button></div> </div> </div> </div> </div>

/* Not necessary for page alerts */ @import url('http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css'); button { margin-bottom: 3px; } /* REQUIRED */ .page-alerts { margin-bottom: 20px; } .page-alerts .page-alert { border-radius: 0; margin-bottom: 0; }

$(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(); }); //Clear all $('.clear-page-alerts').click(function(e) { e.preventDefault(); $('.page-alert').slideUp(); }); });