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


90

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?

Jetez un œil ici stackoverflow.com/questions/23101966/ ... c'est la meilleure réponse que j'ai trouvée
Andres

Réponses:


108

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.


Hey jesse merci! le setTimeout fonctionne et je vais le sélectionner comme solution valide, mais il semble que le comportement devrait en fait être intégré comme TK Kocheran l'a déclaré (et enregistré).
Mario Zigliotto

J'ai regardé le code de bootstrap de Twitter et je n'ai vu aucun support pour les alertes de fermeture automatique.
jessegavin

Oui - j'attends la réponse de TK car à partir de son message ici, il semble que la fonctionnalité de fermeture automatique devrait être là et ne l'est pas - mais le rapport de bogue sur github ne fait aucune référence à cela.
Mario Zigliotto

Ouais, ils ne prétendent pas pouvoir fermer automatiquement les alertes, mais seulement pour pouvoir les fermer par programme avec le plugin jQuery fourni. c'est à dire $('#myAlert').alert('close')ne fonctionne pas comme annoncé.
Naftuli Kay

Vous pouvez étendre jQuery et envoyer cette méthode sur l'objet, comme: $('#my_fancy_alert').createAutoClosingAlert(2000). Vous avez juste besoin de passer $(this).remove()ou $(this).alert('close')en setTimeoutrappel.
aL3xa

99

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);

Certainement une excellente solution. L'alerte s'estompe vraiment bien après le court intervalle. Ça a l'air très professionnel.
Matt Setter

Travailler vite et très bien.
Mohamed Anis Dahmani

1
Doit-il être appelé à chaque fois que l'alerte est affichée, ou cela fonctionne-t-il automatiquement pour toutes les alertes avec classe .alert-message? Ayant du mal à la classe sur mon alerte BS3 est alert alert-danger alert-block, donc devrais - je utiliser .alert, alert-dangerou le nom complet de la classe dans la fonction de délai d' attente?
raffian

@raffian Mettez-le comme ceci: $(".alert-message,.alert-danger,.alert-info")et ainsi de suite. Vous devez déterminer si vous le souhaitez dans tout votre site Web ou non. Si vous le souhaitez dans chaque page, par exemple, dans la lame de Laravel, vous pouvez utiliser quelque chose comme @include ('scripts-alertes') ou @yield ('alertes'). Vous devez comprendre ou poser une question spécifique dans stackoverflow et pas ici ...
Pathros

1
La meilleure façon de procéder. Doit être marqué comme la bonne réponse @Mario Zigliotto car les autres éléments glissent lentement vers le haut et ne changent pas de position immédiatement. Cela semble beaucoup plus beau et professionnel.
Torsten Barthel

4

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'); 
    });

3

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);
}

2

Voici la version coffescript:

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

2

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.


0

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);     
}

0

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.


0

Avec retard et fondu:

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

0

essaye celui-là

$(function () {

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

        }, 3000)

});
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.