codeninja codeninja - 1 month ago 11
HTML Question

Bootstrap 3 alerts dismissed with animation

Is there a way to make dismissed alert in bootstrap have an animation like fade out?

I added the class

.fade
to the code:

<div class="alert alert-info fade alert-dismissable">
<p><b>Gracias</b> por ponerte en contacto! Responderé a tu correo lo más pronto posible.</p>
</div>


But it doesn't work. Any help will be appreciated!

Answer

you can omit the data-dismiss attribute

<div class="alert alert-warning alert-dismissable">
      <button type="button" class="close" aria-hidden="true">&times;</button>
      <p>animated dismissable</p>
</div>

and use the following jQuery

$(".alert button.close").click(function (e) {
    $(this).parent().fadeOut('slow');
});

or if you want clicking anywhere to close the alert use

$(".alert-dismissable").click(function (e) {
    $(this).fadeOut('slow');
});