So schließen Sie Warnungen mithilfe von Twitter Bootstrap automatisch

90

Ich verwende das Bootstrap-CSS-Framework von Twitter (was fantastisch ist). Für einige Nachrichten an Benutzer zeige ich sie mithilfe der Warnungen Javascript JS und CSS an.

Interessenten finden es hier: http://getbootstrap.com/javascript/#alerts

Mein Problem ist dies; Nachdem ich einem Benutzer eine Warnung angezeigt habe, möchte ich, dass diese nach einem bestimmten Zeitintervall verschwindet. Basierend auf den Dokumenten von Twitter und dem Code, den ich durchgesehen habe, sieht es so aus, als wäre dies nicht eingebrannt:

  • Meine erste Frage ist eine Bitte um Bestätigung, dass dies tatsächlich NICHT in Bootstrap eingebrannt ist
  • Zweitens, wie kann ich dieses Verhalten erreichen?
Mario Zigliotto
quelle
Werfen Sie einen Blick hier stackoverflow.com/questions/23101966/… das ist die beste Antwort, die ich gefunden habe
Andres

Antworten:

108

Wenn window.setTimeout(function, delay)Sie anrufen , können Sie dies erreichen. Hier ist ein Beispiel, das die Warnung 2 Sekunden (oder 2000 Millisekunden) nach ihrer Anzeige automatisch schließt.

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

Wenn Sie es in eine raffinierte Funktion einwickeln möchten, können Sie dies tun.

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

Dann könnten Sie es so verwenden ...

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

Ich bin sicher, dass es elegantere Wege gibt, dies zu erreichen.

Jessegavin
quelle
Hey Jesse, danke! Das setTimeout funktioniert und ich werde es als gültige Lösung auswählen, aber es scheint, dass das Verhalten tatsächlich wie von TK Kocheran angegeben (und protokolliert) eingebrannt werden sollte.
Mario Zigliotto
Ich habe mir den Twitter-Bootstrap-Code angesehen und keine Unterstützung für das automatische Schließen von Warnungen festgestellt.
Jessegavin
Ja - ich warte auf die Antwort von TK, denn aus seiner Nachricht hier geht hervor, dass die Funktion zum automatischen Schließen vorhanden sein sollte und nicht - aber der Fehlerbericht auf Github enthält keinen Hinweis darauf.
Mario Zigliotto
Ja, sie behaupten nicht, Warnungen automatisch schließen zu können, sondern sie nur programmgesteuert mit dem bereitgestellten jQuery-Plugin schließen zu können. dh $('#myAlert').alert('close')funktioniert nicht wie angekündigt.
Naftuli Kay
Möglicherweise möchten Sie jQuery erweitern und diese Methode vom Objekt entfernen, z $('#my_fancy_alert').createAutoClosingAlert(2000). Sie müssen nur passieren $(this).remove()oder $(this).alert('close')in setTimeoutRückruf.
aL3xa
99

Ich konnte es auch nicht dazu bringen, mit Alarm zu arbeiten ('schließen').

Ich benutze dies jedoch und es funktioniert ein Vergnügen! Der Alarm wird nach 5 Sekunden ausgeblendet und sobald er verschwunden ist, rutscht der Inhalt darunter in seine natürliche Position.

window.setTimeout(function() {
    $(".alert-message").fadeTo(500, 0).slideUp(500, function(){
        $(this).remove(); 
    });
}, 5000);
Moogboy
quelle
Auf jeden Fall eine tolle Lösung. Der Alarm wird nach der kurzen Pause sehr gut ausgeblendet. Sieht sehr professionell aus.
Matt Setter
Schnell und großartig arbeiten.
Mohamed Anis Dahmani
1
Muss dies jedes Mal aufgerufen werden, wenn die Warnung angezeigt wird, oder funktioniert es automatisch für alle Warnungen mit Klasse .alert-message? Haben Sie Probleme, ist die Klasse auf meinem BS3 Alarm alert alert-danger alert-block, so sollte ich verwenden .alert, alert-dangeroder die vollständigen Klassennamen in der Timeout - Funktion?
Raffian
@raffian Sagen Sie es so: $(".alert-message,.alert-danger,.alert-info")und so weiter. Sie müssen herausfinden, ob Sie es auf Ihrer gesamten Website möchten oder nicht. Wenn Sie es beispielsweise auf jeder Seite in Laravels Blade möchten, können Sie so etwas wie @include ('scripts-alerts') oder @yield ('alerts') verwenden. Sie müssen eine bestimmte Frage im Stackoverflow herausfinden oder stellen und nicht hier ...
Pathros
1
Der beste Weg, dies zu tun. Sollte als die richtige Antwort @Mario Zigliotto markiert werden, da andere Elemente langsam nach oben rutschen und ihre Position nicht sofort ändern. Das sieht viel schöner und professioneller aus.
Torsten Barthel
4

Ich hatte das gleiche Problem, als ich versuchte, Warnmeldungen zu verarbeiten und auszublenden. Ich suchte an verschiedenen Orten und fand dies meine Lösung. Das Hinzufügen und Entfernen der In-Klasse hat mein Problem behoben.

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

}, 5000);

Bei Verwendung von .remove () und in ähnlicher Weise der .alert-Lösung ('close') schien es ein Problem zu geben, dass die Warnung aus dem Dokument entfernt wurde. Wenn ich also dieselbe Warnung div erneut verwenden wollte, konnte ich dies nicht. Diese Lösung bedeutet, dass die Warnung wiederverwendet werden kann, ohne die Seite zu aktualisieren. (Ich habe aJax verwendet, um ein Formular einzureichen und dem Benutzer Feedback zu geben.)

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

Die Verwendung der Aktion "Schließen" für die Warnung funktioniert bei mir nicht, da sie die Warnung aus dem DOM entfernt und ich die Warnung mehrmals benötige (ich poste Daten mit Ajax und zeige dem Benutzer bei jedem Beitrag eine Nachricht). . Also habe ich diese Funktion erstellt, die die Warnung jedes Mal erstellt, wenn ich sie benötige, und dann einen Timer gestartet, um die erstellte Warnung zu schließen. Ich übergebe in die Funktion die ID des Containers, an den ich die Warnung anhängen möchte, die Art der Warnung ('Erfolg', 'Gefahr' usw.) und die Nachricht. Hier ist mein 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);
}
Daniele Armanasco
quelle
2

Dies ist die Coffescript-Version:

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

Mit jeder der oben genannten Lösungen verlor ich weiterhin die Wiederverwendbarkeit der Warnung. Meine Lösung war wie folgt:

Beim Laden der Seite

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

Sobald die Warnung angezeigt werden musste

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

Beachten Sie, dass fadeTo die Deckkraft auf 0 setzt, sodass die Anzeige keine und die Deckkraft 0 war, weshalb ich sie aus meiner Lösung entfernt habe.

Biggles
quelle
0

Nachdem ich einige der Antworten hier und in einem anderen Thread durchgesehen hatte, kam ich zu folgendem Ergebnis:

Ich habe eine Funktion mit dem Namen erstellt showAlert(), die dynamisch eine Warnung mit einem optionalen typeund hinzufügt closeDealy. So können Sie beispielsweise eine Warnung vom Typ danger(dh die Warngefahr von Bootstrap) hinzufügen , die nach 5 Sekunden automatisch geschlossen wird.

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

Fügen Sie dazu die folgende Javascript-Funktion hinzu:

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);     
}
Isapir
quelle
0

Ich brauchte eine sehr einfache Lösung, um etwas nach einiger Zeit zu verbergen, und schaffte es, dies zum Laufen zu bringen:

Im Winkel können Sie dies tun:

$timeout(self.hideError,2000);

Hier ist die Funktion, die ich aufrufe, wenn das Timeout erreicht ist

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

Jetzt kann meine dialog / ui diese Eigenschaften verwenden, um Elemente auszublenden.

leeroya
quelle
0

Mit Verzögerung und Verblassen:

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

Probier diese

$(function () {

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

        }, 3000)

});
danny
quelle