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

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

Pour ceux qui sont intéressés, il peut être trouvé ici: http://getbootstrap.com/javascript/#alerts

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

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

L'appel window.setTimeout(function, delay)vous permettra d'accomplir cela. Voici un exemple qui fermera automatiquement l'alerte 2 secondes (ou 2000 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 pouvez l'utiliser comme ça ...

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

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

Je n'ai pas pu le faire fonctionner avec alert. ('Close') non plus.

Cependant, je l'utilise et cela fonctionne un régal! L'alerte disparaîtra après 5 secondes, et une fois partie, le contenu en 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 popping et de les atténuer. J'ai cherché dans divers endroits et j'ai trouvé que c'était ma solution. L'ajout et la suppression de 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 la solution .alert ('close'), j'ai semblé rencontrer un problème avec l'alerte supprimée du document, donc si je voulais 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'); 
    });

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 publie des données avec ajax et j'affiche un message à l'utilisateur sur chaque message) . 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'identifiant du conteneur auquel je souhaite 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);
}

Voici 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éutilisation 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 nul et l'opacité était de 0, c'est pourquoi j'ai supprimé de ma solution.

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

J'ai créé une fonction nommée showAlert()qui ajouterait dynamiquement une alerte, avec un typeet facultatif closeDealy. Pour que vous puissiez, par exemple, ajouter une alerte de type danger(ie, l'alerte-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:

En angulaire, vous pouvez faire ceci:

$timeout(self.hideError,2000);

Voici la fonction que j'appelle lorsque le timeout est 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 des é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);

essaye celui-là

$(function () {

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

        }, 3000)

});