So schließen Sie Warnungen mithilfe von Twitter Bootstrap automatisch

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?

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.

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

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

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

Dies ist die Coffescript-Version:

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

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.

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

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.

Mit Verzögerung und Verblassen:

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

Probier diese

$(function () {

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

        }, 3000)

});