Bootstrap Alerts Over Content

Display some alerts that are "stackable" ( in the vertical sense, not in z-index sense) and that are overlayed on the content. Success messages fade out, but warnings require dismissal.

by yassinezerguine

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.js"></script>
<div id="alerts" style="position: absolute; width: 80%; z-index: 1">
    
</div>

<div class="col-xs-8">
    <!-- Obligatory lorem ipsum content -->
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
</div>


<!-- I want this button to be stuck to the footer -->
<div class="footer">    
    <button id="success-btn" type="button" class="btn btn-success">
        Success!
    </button>
    <button id="alert-btn" type="button" class="btn btn-danger">
        Alert!
    </button>
    <p class="small">Click a button to display a success or alert message.</p>
</div>

CSS

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}


/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

.container {
  width: auto;
  max-width: 680px;
  padding: 0 15px;
}
.container .text-muted {
  margin: 20px 0;
}

JavaScript

// Success alert that can be dismissed but will fade out
$("#success-btn").on("click", function(){
    var alert = 
        $('<div class="alert alert-success alert-dismissable" style="width: 80%;">' +
        '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>' +
'Dudeical!!</div>');
    alert.appendTo("#alerts");
    alert.slideDown("slow").delay(3000).fadeOut(2000, function(){
        $(this).remove();    
    });
});

// Warning alert that won't fade out but can be dismissed
$("#alert-btn").on("click", function(){
    var alert = 
        $('<div class="alert alert-danger alert-dismissable" style="width: 80%;">' +
        '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>' +
'Danger!!</div>');
    alert.appendTo("#alerts");
    alert.slideDown("slow");
});