web-dev-qa-db-fra.com

Alertes Bootstrap 3 rejetées avec animation

Existe-t-il un moyen de faire en sorte que l'alerte rejetée dans le bootstrap ait une animation comme un fondu enchaîné?

J'ai ajouté la classe .fade au 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>

Mais ça ne marche pas. Toute aide serait appréciée!

jqueryhtmlhtml5twitter-bootstraptwitter-bootstrap-3
13
codeninja

vous pouvez omettre l'attribut data-ignore 

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

et utilisez le jQuery suivant

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

ou si vous voulez cliquer n'importe où pour fermer l'alerte, utilisez

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

vous pouvez ajouter «.in» class, fade out alerte.

<div class="alert alert-info fade in">
<a class="close" data-dismiss="alert" href="#">&times;</a>
<p>message</p>
</div>
41
guest

$('.alert-dismissable').fadeOut(); ou attribuez une animation de fondu de sortie css3 à votre classe de fondu et appliquez-la au <div> lorsque vous souhaitez qu'elle disparaisse.

3
zgood

Vous pouvez écouter l'événement close.bs.alert pour utiliser des effets personnalisés:

$(function(){
    $('body').on('close.bs.alert', function(e){
        e.preventDefault();
        e.stopPropagation();
        $(e.target).slideUp();
    });
});

Voir en action à https://jsfiddle.net/6s8dgh72/8/

2
Pavel Dubinin