Create a success alert via bootstrap

Alerts are a nice feature in Bootstrap to grab a user’s attention and deliver information. The different types of alerts are success, info, warning and danger, which are color coded accordingly. Alerts can include a close button for users to remove it from view once they have read it. In my project I wanted success alerts to show to users then, after a few seconds close on their own. This can be done easily with jQuery’s fadeTo() function. You can also incorporate a slick transition effect with the slideUp() function.


<div class="alert alert-success"> <a href="#" class="close" data-dismiss="alert">×</a>
<h4>Success</h4>
<br />
<div>All records were processed correctly!</div>
</div>
Then you just need a little script. This script targets only success alerts and will close it after 5 seconds:

window.setTimeout(function () {
$(".alert-success").fadeTo(500, 0).slideUp(500, function () {
$(this).remove();
});
}, 5000);