Les alertes Twitter Bootstrap peuvent-elles disparaître aussi bien?

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

Merci!

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

×

Well done! You successfully read this alert message.

Je ne suis pas du tout d’accord avec la plupart des réponses précédemment mentionnées.

Réponse courte:

Omettez la classe “in” et ajoutez-la en utilisant jQuery pour la fader.

Voir ce jsfiddle pour un exemple qui s’estompe après 3 secondes http://jsfiddle.net/QAz2U/3/

Longue réponse:

Bien que le bootstrap ne soit pas compatible avec les alertes, la plupart des réponses utilisent la fonction de fondu jQuery, qui utilise JavaScript pour animer l’élément. Le grand avantage de ceci est la compatibilité entre navigateurs. L’inconvénient est la performance (voir aussi: jQuery pour appeler l’animation de fondu CSS3? ).

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

Bootstraps CSS pour fondre 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 est-ce que 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 (). La même chose vaut pour le vieux matériel avec les navigateurs modernes. En utilisant des transitions CSS3, les utilisateurs de navigateurs modernes obtiendront une animation fluide même avec du matériel ancien, et les utilisateurs de navigateurs plus anciens qui ne supportent pas les transitions CSS verront apparaître instantanément l’élément, ce qui est une meilleure expérience utilisateur que les animations instables.

Je suis venu ici pour chercher la même réponse que ci-dessus: fondre dans une alerte bootstrap. Après quelques recherches dans le code et CSS de Bootstrap, la réponse est plutôt simple. N’ajoutez pas la classe “in” à votre alerte. Et ajoutez ceci en utilisant jQuery lorsque vous souhaitez afficher votre alerte.

HTML (remarquez qu’il n’y a pas de cours en classe!)

 

Javascript:

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

L’appel de la fonction ci-dessus ajoute la classe “in” et apparaît dans l’alerte en utilisant les transitions CSS3 🙂

Voir aussi ce jsfiddle pour un exemple utilisant un timeout (merci John Lehmann!): http://jsfiddle.net/QAz2U/3/

La chose que j’utilise est la suivante:

Dans votre modèle, une zone d’alerte

 

Ensuite, une fonction jQuery pour afficher une alerte

 function newAlert (type, message) { $("#alert-area").append($("

" + message + "

")); $(".alert-message").delay(2000).fadeOut("slow", function () { $(this).remove(); }); } newAlert('success', 'Oh yeah!');

Vous pouvez afficher une boîte avec jquery. Utilisez les bootstraps intégrés dans la classe “hide” pour définir efficacement display: none sur l’élément div:

 
×

Well done! You successfully read this alert message.

puis utilisez la fonction fadeIn dans jquery, comme ceci:

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

Il existe également 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 de documentation officiel de jQuery: http://api.jquery.com/fadeIn/

Juste une note latérale, si vous n’utilisez pas jquery, vous pouvez soit append la classe “hide” à votre propre fichier CSS, ou simplement append ceci à votre div:

   

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

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

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

bootstrap:

 
× // code

Fonctionne dans tous les navigateurs.

Ajouter la classe hide au alert-message d’ alert-message . Ensuite, placez le code suivant après l’importation de votre script jQuery:

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

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 puis de fondu, j’ai simplement utilisé la fonction suivante et utilisé jQuery:

HTML sur ma page pour append les alertes à:

  

Fonction Javascript pour afficher et rejeter l’alerte.

 function showAndDismissAlert(type, message) { var htmlAlert = '
' + message + '
'; // 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 rejeter l’alerte, appelez simplement la fonction comme suit:

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

En guise de note, j’ai stylé les messages div.alert fixés sur le dessus:

   

Je ne suis pas d’accord avec la façon dont Bootstrap utilise le fade in (comme on le voit dans leur documentation – http://v4-alpha.getbootstrap.com/components/alerts/ ), et je suggère d’éviter les noms de classes fade et fade . , et d’éviter ce modèle en général (qui est actuellement vu 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 continuent à vivre. 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 ont été faded ou faded-in . L’équipe de Bootstrap a déjà fait disparaître la hide hidden , pourquoi est-ce que la fade est différente?

(2) L’utilisation de 2 classes fade et fade pour une seule transition pollue l’espace de la classe. Et il n’est pas clair que les fade soient associés les uns aux autres. Le cours in classe ressemble à une classe complètement indépendante, comme l’ alert et le alert-success .

La meilleure solution consiste à utiliser les éléments faded lorsque l’élément a été éliminé, et à remplacer cette classe par l’ faded-in lorsque l’élément a été fondu.

Alerte fanée

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

HTML

 
×

Well done! You successfully read this alert message.

CSS

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

JQuery

 $('#saveAlert .close').on('click', function () { $("#saveAlert") .addClass('faded'); }); 

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

Commencez par append votre code HTML comme ceci:

 

puis utilisez:

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

Vous pouvez transmettre tous les types d’alerte d’amorçage, tels que les error , les success et les warning à la type propriétés en tant qu’options.

J’ai eu cette façon de fermer mon Alert après 3 secondes. J’espère que ce sera utile.

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

C’est une question très 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 ci-dessous un exemple de travail:

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