Peut Twitter Bootstrap alertes de fade in et out?

Question

Quand j'ai vu les alertes dans le Bootstrap, je pensais qu'ils allaient se comporter comme la fenêtre modale ne, de descendre ou de décoloration, puis fondu lorsqu'il est fermé. Mais il semble qu'ils sont toujours visibles. Je suppose que je pourrais passer dans une couche au-dessus de mon application et de gérer les montrer, mais je me demandais si la fonctionnalité a été construit?

merci!

Modifier, ce que j'ai à ce jour:

<div id="saveAlert" class="alert-message success fade in" data-alert="alert" style="top:0">
  <a class="close" href="#">×</a>
  <p><strong>Well done!</strong> You successfully read this alert message.</p>
</div>

Answer 1

Je suis en total désaccord avec la plupart des réponses a été mentionné précédemment.

Réponse courte:

Omettre le "in" de la classe et les ajouter à l'aide de jQuery pour en fondu.

Voir ce jsfiddle pour un exemple qui disparaît en alerte après 3 secondes http://jsfiddle.net/QAz2U/3/

Réponse longue:

Même si il est vrai bootstrap n'est pas nativement en charge de la décoloration dans les alertes de la plupart des réponses ci-dessus utilise le jQuery fonction fade, qui utilise Javascript pour animer (fade) de l'élément. Le gros avantage, c'est de la croix-navigateur de compatibilité. L'inconvénient, c'est de la performance (voir aussi: jQuery pour appeler CSS3 animation de fondu?).

Bootstrap utilise CSS3 transitions, qui ont de meilleures performances. Ce qui est important pour les appareils mobiles:

Bottes CSS à l'évanouissement de l'alerte:

.fade {
  opacity: 0;
  -webkit-transition: opacity 0.15s linear;
  -moz-transition: opacity 0.15s linear;
  -o-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;
}
.fade.in {
  opacity: 1;
}

Pourquoi dois-je pense que cette performance est-elle si importante? Les personnes utilisant les anciens navigateurs et du matériel potentiellement obtenir un agitée transitions avec jQuery.fade(). Il en va de même pour les vieux matériel avec les navigateurs modernes. À l'aide de transitions CSS3 personnes utilisant les navigateurs modernes permettra d'obtenir une animation fluide, même avec du matériel ancien, et les gens utilisant les anciens navigateurs qui ne prennent pas en charge les transitions CSS sera instantanément voir l'élément de la pop, je pense que c'est une meilleure activité que agitée animations.

Je suis venu ici à la recherche pour la même réponse que ci-dessus: à s'estomper dans un bootstrap alerte. Après quelques recherches dans le code CSS de Bootstrap, la réponse est plutôt simple. Ne pas ajouter la classe "in" de votre alerte. Et les ajouter à l'aide de jQuery lorsque vous souhaitez diminuer votre alerte.

HTML (notez qu'il n'est PAS en classe!)

<div id="myAlert" class="alert success fade" data-alert="alert">
  <!-- rest of alert code goes here -->
</div>

Javascript:

function showAlert(){
  $("#myAlert").addClass("in")
}

L'appel de la fonction au-dessus de la fonction ajoute la classe "in" et disparaît dans l'alerte à l'aide de transitions CSS3 :-)

Voir aussi cette jsfiddle pour un exemple à l'aide d'un délai d'attente (merci John Lehmann!): http://jsfiddle.net/QAz2U/3/

Answer 2

La chose que j'utilise est ceci:

Dans votre modèle d'une zone d'alerte

<div id="alert-area"></div>

Ensuite, une fonction jQuery pour montrer une alerte

function newAlert (type, message) {
    $("#alert-area").append($("<div class='alert-message " + type + " fade in' data-alert><p> " + message + " </p></div>"));
    $(".alert-message").delay(2000).fadeOut("slow", function () { $(this).remove(); });
}
newAlert('success', 'Oh yeah!');

Answer 3

Vous pouvez fondu dans une boîte à l'aide de jquery. Utilisation bootstraps "cacher" de la classe à mettre display:none sur l'élément div:

<div id="saveAlert" class="alert alert-success hide" data-alert="alert" style="top:0">
            <a class="close" href="#">×</a>
            <p><strong>Well done!</strong> You successfully read this alert message.</p>
        </div>

et puis utiliser la fonction fadeIn jquery dans, comme suit:

$("#saveAlert").fadeIn();

Il y a également spécifier une durée pour la fonction fadeIn, e.g: $("#saveAlert").fadeIn(400);

Plus de détails sur l'utilisation de la fonction fadeIn peut être trouvé sur le site officiel de jQuery site de documentation: http://api.jquery.com/fadeIn/

Juste une note, si vous n'êtes pas à l'aide de jquery, vous pouvez ajouter le "cacher" de la classe de votre propre fichier CSS, ou tout simplement les ajouter à vos div:

 <div style="display:none;" id="saveAlert">

Votre div sera alors en gros être mis à caché par défaut, puis jQuery va effectuer le fadeIn action, forçant la div à afficher.

Answer 4

Pour 2.3 et au-dessus, il suffit d'ajouter:

$(".alert").fadeOut(3000 );

bootstrap:

<div class="alert success fade in" data-alert="alert" >
    <a class="close" data-dismiss="alert" href="#">&times;</a>
    // code 
</div>

Fonctionne dans tous les navigateurs.

Answer 5

Ajouter hide classe alert-message. Ensuite, placez le code suivant après votre script jQuery importation:

$(document).ready( function(){
    $(".alert-message").animate({ 'height':'toggle','opacity':'toggle'});
    window.setTimeout( function(){
        $(".alert-message").slideUp();
    }, 2500);
});

Si vous souhaitez gérer plusieurs messages, ce code va les cacher dans l'ordre croissant:

$(document).ready( function(){
   var hide_delay = 2500;  // starting timeout before first message is hidden
   var hide_next = 800;   // time in mS to wait before hiding next message
   $(".alert-message").slideDown().each( function(index,el) {
      window.setTimeout( function(){
         $(el).slideUp();  // hide the message
      }, hide_delay + hide_next*index);
   });
});