web-dev-qa-db-fra.com

Est-ce que Twitter Bootstrap peuvent apparaître et disparaître en fondu?)

Lorsque j'ai vu les alertes pour la première fois dans Bootstrap), je pensais qu'elles se comportaient comme la fenêtre modale, qu'elles s'affichent ou disparaissent en fondu puis qu'elles disparaissent lorsqu'elles sont fermées. Mais il semble qu'elles soient toujours visibles. Je suppose que je pourrais les avoir dans une couche au-dessus de mon application et gérer leur affichage, mais je me demandais si la fonctionnalité était intégrée?

merci!

Edit, ce que j'ai jusqu'à présent:

<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>
jquerycssalertstwitter-bootstrap
75
kreek

Je suis fortement en désaccord avec la plupart des réponses mentionnées précédemment.

Réponse courte:

Omettez la classe "in" et ajoutez-la à l'aide de jQuery pour la faire apparaître en fondu.

Voir ce jsfiddle pour un exemple qui passe en alerte au bout de 3 secondes http://jsfiddle.net/QAz2U/3/

Réponse longue:

Bien que cela soit vrai bootstrap ne prend pas nativement en charge le fondu dans les alertes, la plupart des réponses ici utilisent la fonction de fondu de jQuery, qui utilise JavaScript pour animer l'élément (le fondu de fondu.) compatibilité avec les navigateurs. L’inconvénient est la performance (voir aussi: jQuery pour appeler l’animation de fondu CSS3? ).

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

Bootstraps CSS pour atténuer 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 je pense que cette performance est si importante? Les personnes utilisant d'anciens navigateurs et matériels auront potentiellement des transitions instables avec jQuery.fade (). Il en va de même pour l'ancien matériel avec les navigateurs modernes. En utilisant les transitions CSS3, les personnes utilisant des navigateurs modernes obtiendront une animation fluide, même avec du matériel ancien, et les utilisateurs de navigateurs plus anciens qui ne prennent pas en charge les transitions CSS verront instantanément l'élément apparaître, ce qui, à mon avis, est une meilleure expérience utilisateur que des animations agitées.

Je suis venu ici à la recherche de la même réponse que celle ci-dessus: fondre dans une alerte bootstrap. Après avoir creusé dans le code et le CSS de Bootstrap la réponse est N'ajoutez pas la classe "in" à votre alerte et ajoutez-la à l'aide de jQuery lorsque vous souhaitez afficher un fondu dans votre alerte.

HTML (remarquez qu'il n'y a pas de NO dans 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 ci-dessus ajoute la classe "in" et se fane dans l'alerte à l'aide des transitions CSS3 :-)

Voir aussi ce jsfiddle pour un exemple utilisant un délai d’attente (merci John Lehmann!): http://jsfiddle.net/QAz2U/3/

139
DivZero

La chose que j'utilise est la suivante:

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!');
28
Rob Vermeer

Vous pouvez ouvrir une boîte en utilisant jquery. Utilisez les bootstraps construits 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>

puis utilisez la fonction fadeIn dans jQuery, comme suit:

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

Vous pouvez également spécifier une durée pour la fonction fadeIn, par exemple: $ ("# saveAlert"). FadeIn (400);

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

Juste une petite remarque, si vous n’utilisez pas jquery, vous pouvez soit ajouter la classe 'hide' à votre propre fichier CSS, soit simplement ajouter ceci à votre div:

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

Votre div sera alors fondamentalement caché par défaut, puis jQuery exécutera l’action fadeIn, forçant l’affichage de la div.

17
kreek

Pour les versions 2.3 et supérieures, ajoutez simplement:

$(".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.

8
pri

Ajoutez hide class à alert-message. Ensuite, mettez le code suivant après votre importation de script jQuery:

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

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

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

Pour un effet de fondu en entrée puis en sortie, je viens d'utiliser la fonction suivante et jQuery:

Html sur ma page pour ajouter la ou les alertes à:

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

Fonction Javascript pour afficher et ignorer 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(); });
}

Ensuite, pour afficher et ignorer l'alerte, appelez simplement la fonction comme suit:

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

En note de bas de page, j’ai stylé les messages div.alert fixés en haut:

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

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

(1) La sémantique est fausse - les transitions sont temporaires, mais les noms de classe restent en vie. Alors pourquoi devrions-nous nommer nos classes fade et fade in? Ce 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 classes. Et, il n'est pas clair que fade et in soient associés l'un à l'autre. La classe in ressemble à une classe complètement indépendante, comme alert et alert-success.

La meilleure solution consiste à utiliser faded lorsque l'élément a été estompé et à remplacer cette classe par faded-in lorsque l’élément a été masqué.

Alerte fanée

Donc, pour répondre à la question. Je pense que le balisage, le style et la logique de l'alerte doivent être écrits de la manière suivante. Remarque: n'hésitez pas à remplacer la logique jQuery si vous utilisez le javascript de Vanilla .

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');

});
2
tfmontague

J'ai eu ce moyen de fermer mon Alert après 3 secondes. J'espère que cela vous sera utile.

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

Bien sûr que oui. Utilisez ce fichier simple dans votre projet: https://Gist.github.com/3851727

Tout d'abord, ajoutez le code HTML comme ceci:

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

et ensuite utiliser:

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

Vous pouvez transmettre toutes les options bootstrap) telles que error, success et warning à type.

1
Afshin Mehrabani

C'est très question importante et j'avais du mal à le faire (afficher/masquer) le message en remplaçant le message actuel et en ajoutant un nouveau message.

Voici 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>

J'espère que cela aidera les autres!

0
VicJordan