web-dev-qa-db-fra.com

Comment fermer automatiquement les alertes à l'aide de Twitter Bootstrap

J'utilise le framework CSS bootstrap de Twitter (qui est fantastique). Pour certains messages aux utilisateurs, je les affiche en utilisant les alertes Javascript JS et CSS. 

Pour les intéressés, vous pouvez le trouver ici: http://getbootstrap.com/javascript/#alerts

Mon problème est le suivant. après avoir affiché une alerte à un utilisateur, j'aimerais qu'il disparaisse au bout d'un certain temps. D'après la documentation de Twitter et le code que j'ai consulté, il semble que cela ne soit pas écrit:

  • Ma première question est une demande de confirmation que cela n’est en effet pas cuit dans Bootstrap.
  • Deuxièmement, comment puis-je obtenir ce comportement? 
javascriptjquerycssalertdialogtwitter-bootstrap
90
Mario Zigliotto

Appeler window.setTimeout(function, delay) vous permettra de le faire. Voici un exemple qui ferme automatiquement l'alerte 2 secondes (ou 2 000 millisecondes) après son affichage.

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

Si vous voulez l'envelopper dans une fonction astucieuse, vous pouvez le faire.

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

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

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

Je suis certain qu'il existe des moyens plus élégants d'y parvenir.

107
jessegavin

Je ne pouvais pas le faire fonctionner avec alert. ('Close') non plus.

Cependant, j'utilise cela et ça marche un régal! L'alerte disparaîtra au bout de 5 secondes et, une fois disparue, le contenu situé au-dessous glissera dans sa position naturelle.

window.setTimeout(function() {
    $(".alert-message").fadeTo(500, 0).slideUp(500, function(){
        $(this).remove(); 
    });
}, 5000);
98
moogboy

J'ai eu le même problème lorsque j'essayais de gérer les alertes et de les atténuer. J'ai cherché différents endroits et trouvé que c'était ma solution. Ajouter et supprimer la classe 'in' a résolu mon problème.

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

}, 5000);

Lors de l'utilisation de .remove () et de la même manière que la solution .alert ('close'), il semblait y avoir un problème d'alerte supprimée du document. Par conséquent, si je souhaitais utiliser à nouveau le même div d'alerte, je ne pouvais pas. Cette solution signifie que l'alerte est réutilisable sans actualiser la page. (J'utilisais aJax pour soumettre un formulaire et présenter des commentaires à l'utilisateur) 

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

L'utilisation de l'action 'fermer' sur l'alerte ne fonctionne pas pour moi car elle supprime l'alerte du DOM et j'ai besoin de l'alerte plusieurs fois (je poste des données avec ajax et je montre un message à l'utilisateur à chaque publication) . J'ai donc créé cette fonction qui crée l'alerte chaque fois que j'en ai besoin, puis lance un chronomètre pour fermer l'alerte créée. Je passe dans la fonction l'id du conteneur auquel je veux ajouter 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);
}
3
Daniele Armanasco

Avec chacune des solutions ci-dessus, j'ai continué à perdre la possibilité de réutiliser l'alerte. Ma solution était la suivante:

Sur le chargement de la page

$("#success-alert").hide();

Une fois que l'alerte devait être affichée

 $("#success-alert").show();
 window.setTimeout(function () {
     $("#success-alert").slideUp(500, function () {
          $("#success-alert").hide();
      });
 }, 5000);

Notez que fadeTo définit l'opacité sur 0; l'affichage est donc nul et l'opacité est 0, c'est pourquoi j'ai retiré de ma solution.

2
biggles

Ceci est la version coffescript:

setTimeout ->
 $(".alert-dismissable").fadeTo(500, 0).slideUp(500, -> $(this.remove()))
,5000
2
Johniboy

essaye celui-là

$(function () {

 setTimeout(function () {
            if ($(".alert").is(":visible")){
                 //you may add animate.css class for fancy fadeout
                $(".alert").fadeOut("fast");
            }

        }, 3000)

});
0
danny

Avec retard et fondu:

setTimeout(function(){
    $(".alert").each(function(index){
        $(this).delay(200*index).fadeTo(1500,0).slideUp(500,function(){
            $(this).remove();
        });
    });
},2000);
0
GigolNet Guigolachvili

Après avoir passé en revue certaines des réponses ici et dans un autre fil, voici ce que je me suis retrouvé avec:

J'ai créé une fonction nommée showAlert() qui ajouterait de manière dynamique une alerte, avec une option type et closeDealy. Pour que vous puissiez, par exemple, ajouter une alerte de type danger (c'est-à-dire, alerte-danger de Bootstrap) qui se fermera automatiquement au bout de 5 secondes comme suit:

showAlert("Warning message", "danger", 5000);

Pour cela, ajoutez la fonction Javascript suivante:

function showAlert(message, type, closeDelay) {

    if ($("#alerts-container").length == 0) {
        // alerts-container does not exist, add it
        $("body")
            .append( $('<div id="alerts-container" style="position: fixed;
                width: 50%; left: 25%; top: 10%;">') );
    }

    // default to alert-info; other options include success, warning, danger
    type = type || "info";    

    // create the alert div
    var alert = $('<div class="alert alert-' + type + ' fade in">')
        .append(
            $('<button type="button" class="close" data-dismiss="alert">')
            .append("&times;")
        )
        .append(message);

    // add the alert div to top of alerts-container, use append() to add to bottom
    $("#alerts-container").prepend(alert);

    // if closeDelay was passed - set a timeout to close the alert
    if (closeDelay)
        window.setTimeout(function() { alert.alert("close") }, closeDelay);     
}
0
isapir

J'avais besoin d'une solution très simple pour cacher quelque chose après un certain temps et j'ai réussi à la faire fonctionner:

En angulaire, vous pouvez faire ceci:

$timeout(self.hideError,2000);

Voici la fonction que j'appelle quand le délai d'attente est atteint

 self.hideError = function(){
   self.HasError = false;
   self.ErrorMessage = '';
};

Alors maintenant, mon dialogue/interface utilisateur peut utiliser ces propriétés pour masquer des éléments.

0
leeroya