Peut Twitter Bootstrap alertes de fade in et out?

la chose que j'utilise est ceci:

dans votre modèle une zone d'alerte

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

puis une fonction jQuery pour afficher 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!');

vous pouvez fondu-dans une boîte en utilisant jquery. Utilisez bootstraps intégré dans la classe 'hide' pour définir efficacement 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 ensuite utiliser la fonction fadeIn dans jquery, comme suit:

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

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

vous trouverez tous les détails sur l'utilisation de la fonction fadeIn sur le site officiel de jQuery.: http://api.jquery.com/fadeIn /

juste un sidenote aussi bien, si vous n'utilisez pas jquery, vous pouvez soit ajouter la classe 'hide' à votre propre fichier CSS, ou juste ajouter ceci à votre div:

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

votre div sera alors essentiellement défini à hidden as default, puis jQuery exécutera l'action fadeIn, forçant le div à être affiché.

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.

ajouter hide à alert-message . Ensuite, mettez le code suivant après votre jQuery script import:

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

si vous voulez gérer plusieurs messages, ce code les cachera dans l'ordre ascendant:

$(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);
   });
});

aucune des réponses actuelles n'a fonctionné pour moi. J'utilise Bootstrap 3.

J'ai aimé ce que Rob Vermeer faisait et je suis parti de sa réponse.

Pour un fondu puis l'effet de fondu de sortie, j'ai juste utilisé écrit la fonction suivante et utilisé jQuery:

Html sur ma page pour ajouter l'alerte(s) à:

        <div class="alert-messages text-center">
        </div>

fonction Javascript pour afficher et annuler l'alerte.

function showAndDismissAlert(type, message) {
    var htmlAlert = '<div class="alert alert-' + type + '">' + message + '</div>';

    // Prepend so that alert is on top, could also append if we want new alerts to show below instead of on top.
    $(".alert-messages").prepend(htmlAlert);

    // Since we are prepending, take the first alert and tell it to fade in and then fade out.
    // Note: if we were appending, then should use last() instead of first()
    $(".alert-messages .alert").first().hide().fadeIn(200).delay(2000).fadeOut(1000, function () { $(this).remove(); });
}

alors, pour afficher et rejeter l'alerte, il suffit d'appeler la fonction comme ceci:

    showAndDismissAlert('success', 'Saved Successfully!');
    showAndDismissAlert('danger', 'Error Encountered');
    showAndDismissAlert('info', 'Message Received');

comme note, j'ai appelé le div.alerte-messages fixe sur le dessus:

    <style>
    div.alert-messages {
        position: fixed;
        top: 50px;
        left: 25%;
        right: 25%;
        z-index: 7000;
    }
    </style>

Je ne suis pas d'accord avec la façon dont Bootstrap utilise fade in (comme vu dans leur documentation - http://v4-alpha.getbootstrap.com/components/alerts/ ), et ma suggestion est d'éviter les noms de classe fade et in , et d'éviter ce modèle en général (qui est actuellement vu dans la réponse la mieux cotée à cette question).

(1) la sémantique est fausse - les transitions sont temporaires, mais les noms de classe restent vivants. Alors pourquoi devrions-nous nommer nos classes fade et fade in ? Il devrait être faded et faded-in , de sorte que lorsque les développeurs lisent le balisage, il est clair que ces éléments étaient faded ou faded-in . L'équipe de Bootstrap a déjà supprimé hide pour hidden , pourquoi fade est-il différent?

(2) L'utilisation de 2 classes fade et in pour une seule transition pollue l'espace de classe. Et, il n'est pas clair que fade et in sont associés l'un à l'autre. La classe in ressemble à une classe complètement indépendante, comme alert et alert-success .

La meilleure solution est d'utiliser des faded lorsque l'élément a été supprimé, et pour remplacer la classe avec faded-in lorsque l'élément a été décoloré.

Alerte Fanée

donc pour répondre à la question. Je pense que le signal d'alerte, le style, et la logique devrait être écrite de la manière suivante. Note: n'hésitez pas à remplacer la logique jQuery, si vous utilisez JavaScript vanille .

HTML

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

CSS

.faded {
  opacity: 0;
  transition: opacity 1s;
}

JQuery

$('#saveAlert .close').on('click', function () {

  $("#saveAlert")
    .addClass('faded');

});

bien sûr, oui. Utilisez ce fichier simple dans votre projet: https://gist.github.com/3851727

d'abord vous ajouter HTML comme ceci:

<div id="messagebox" class="alert hide"></div>

et ensuite utiliser:

$("#messagebox").message({text: "Hello world!", type: "error"});

vous pouvez passer tous les types d'alertes bootstrap tels que error , success et warning à type comme propriété d'options.

j'ai eu ce moyen de fermer mon alerte après 3 secondes. Espérons qu'il sera utile.

    setTimeout(function(){
    $('.alert').fadeTo("slow", 0.1, function(){
        $('.alert').alert('close')
    });     
    }, 3000)

C'est très question importante et j'ai eu du mal à le faire (afficher/cacher) message en remplaçant courant et Ajouter nouveau message.

ci-dessous est un exemple de travail:

function showAndDismissAlert(type, message) {

  var htmlAlert = '<div class="alert alert-' + type + '">' + message + '</div>';
  $(".alert-messages").prepend(htmlAlert);
  $(".alert-messages .alert").hide().fadeIn(600).delay(2000).fadeOut(1000, function() {
    $(this).remove();
  });

}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="alert-messages"></div>

<div class="buttons">
  <button type="button" name="button" onclick="showAndDismissAlert('success', 'Saved Successfully!')">Button1</button>
  <button type="button" name="button" onclick="showAndDismissAlert('danger', 'Error Encountered')">Button2</button>
  <button type="button" name="button" onclick="showAndDismissAlert('info', 'Message Received')">Button3</button>
</div>

Espère que ça va aider les autres!