Comment fermer automatiquement les alertes en utilisant Twitter Bootstrap

Je ne pouvais pas le faire fonctionner avec d'alerte.("fermer"), soit.

Cependant, je l'utilise et cela fonctionne un régal! L'alerte disparaîtra après 5 secondes, et une fois parti, le contenu ci-dessous glissera jusqu'à sa position naturelle.

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

J'ai eu ce même problème en essayant de gérer les alertes et les effaçant. J'ai cherché dans divers endroits et j'ai trouvé que c'était ma solution. L'ajout et la suppression de la classe' in ' ont résolu mon problème.

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

}, 5000);

Lors de l'utilisation .remove() et de même les .solution alert ('close') j'ai semblé rencontrer un problème avec la suppression de l'alerte du document, donc si je voulais utiliser à nouveau la même alerte div, j'étais incapable de le faire. Cette solution signifie que l'alerte est réutilisable sans rafraîchir la page. (J'ai été utiliser 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'); 
    });

L'utilisation de l'action 'close' 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 sur chaque post). J'ai donc créé cette fonction qui crée l'alerte chaque fois que j'en ai besoin, puis démarre une minuterie 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 ('success', 'danger', etc.) et le message. Ici est 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);
}

C'est la version coffescript:

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

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

Au 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, donc l'affichage était none et l'opacité était 0, c'est pourquoi j'ai retiré de ma solution.

Après avoir passé en revue certaines des réponses ici et dans un autre fil, voici ce que j'ai fini avec:

J'ai créé une fonction nommée showAlert() qui ajouterait dynamiquement une alerte, avec une option type et closeDealy. De sorte que vous pouvez, par exemple, ajouter une alerte de type danger (c'est-à-dire, alert-danger de Bootstrap) qui se fermera automatiquement après 5 secondes comme ceci:

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

Pour y parvenir, 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);     
}

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

Angulaire, vous pouvez faire ceci:

$timeout(self.hideError,2000);

Voici la fonction que j'appelle lorsque le délai d'attente a été atteint

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

Alors maintenant, ma boîte de dialogue / interface utilisateur peut utiliser ces propriétés pour masquer les éléments.

Avec retard et fondu:

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

Essayez celui-ci

$(function () {

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

        }, 3000)

});