Comment faire pour automatiquement les alertes étroite en utilisant Twitter Bootstrap

Question

Je suis à l'aide de twitter bootstrap framework CSS (ce qui est fantastique). Certains messages d'utilisateurs, je suis d'affichage en utilisant les alertes Javascript, CSS et JS.

Pour ceux que cela intéresse, il peut être trouvé ici: http://getbootstrap.com/javascript/#alerts

Ma question est la suivante; après j'ai affiché une alerte à un utilisateur, j'aimerais qu'il suffit d'aller loin après un certain intervalle de temps. Basé sur twitter docs et le code que j'ai regardé à travers il semble que ce n'est pas cuit:

• Ma première question est une demande de confirmation que ce n'est effectivement PAS cuit dans Bootstrap
• Deuxièmement, comment puis-je obtenir ce comportement?

Answer 1

Appelant window.setTimeout(function, delay) vous permettra d'accomplir cette tâche. Voici un exemple qui va automatiquement fermer l'alerte 2 secondes (ou 2000 millisecondes) après il est affiché.

$(".alert-message").alert();
window.setTimeout(function() { $(".alert-message").alert('close'); }, 2000);

Si vous souhaitez envelopper dans une chouette fonction vous pouvez faire cela.

function createAutoClosingAlert(selector, delay) {
   var alert = $(selector).alert();
   window.setTimeout(function() { alert.alert('close') }, delay);
}

Ensuite, vous pouvez l'utiliser comme si...

createAutoClosingAlert(".alert-message", 2000);

Je suis certain il y a de plus élégant des moyens pour y parvenir.

Answer 2

Je ne pouvais pas faire fonctionner avec alerte. (« fermer ») ou l’autre.

Cependant, j’utilise cela et il fonctionne un régal ! L’alerte disparaîtra au bout de 5 secondes, et une fois disparu, le contenu ci-dessous il glissera jusqu'à sa position naturelle.

Answer 3

J'ai eu ce même problème lorsque vous essayez de gérer popping alertes et à la décoloration. J'ai cherché autour de différents lieux et trouvé que c'était ma solution. L'ajout et la suppression de la 'dans' fixes de classe de mon problème.

window.setTimeout(function() { // hide alert message
    $("#alert_message").removeClass('in'); 

}, 5000);

Lors de l'utilisation .remove() et de même les .alert('fermer') solution me semblait frappé d'un problème avec l'alerte d'être retiré du document, donc si je voulais utiliser la même alerte div encore, j'ai pas pu. Cette solution signifie que l'alerte est réutilisable sans rafraichissement de la page. (J'ai été en utilisant aJax pour envoyer un formulaire et présenter des commentaires de l'utilisateur)

    $('#Some_Button_Or_Event_Here').click(function () { // Show alert message
        $('#alert_message').addClass('in'); 
    });

Answer 4

À l'aide de la "fermer" action sur l'alerte ne fonctionne pas pour moi, car il supprime l'alerte de la DOM et j'ai besoin de l'alerte plusieurs fois (je suis l'affichage de données avec l'ajax et je afficher un message à l'utilisateur sur chaque poste). J'ai donc créé cette fonction qui créer l'alerte à chaque fois que j'ai besoin d'elle et commence alors un compte à rebours pour fermer l'alerte créée. Je passe à la fonction de l'id du conteneur sur lequel je veux ajouter de l'alerte, le type d'alerte ("succès", "danger", etc.) et le message. Voici mon code:

function showAlert(containerId, alertType, message) {
    $("#" + containerId).append('<div class="alert alert-' + alertType + '" id="alert' + containerId + '">' + message + '</div>');
    $("#alert" + containerId).alert();
    window.setTimeout(function () { $("#alert" + containerId).alert('close'); }, 2000);
}

Answer 5

J’ai mis en place une bibliothèque Javascript qui a ce que vous demandez comme caractéristique : https://gist.github.com/1569896