wake-up-neo.net

So schließen Sie Benachrichtigungen automatisch mit Twitter Bootstrap

Ich benutze das Bootstrap-CSS-Framework von Twitter (was fantastisch ist). Für einige Meldungen an Benutzer zeige ich sie mit den Alerts Javascript JS und CSS. 

Für Interessierte ist es hier zu finden: http://getbootstrap.com/javascript/#alerts

Mein Problem ist das; Nachdem ich einem Benutzer eine Benachrichtigung angezeigt habe, möchte ich, dass er nach einiger Zeit wieder verschwindet. Basierend auf den Dokumenten von Twitter und dem Code, den ich durchgesehen habe, sieht es so aus, als wäre das nicht in:

  • Meine erste Frage ist die Bitte um Bestätigung, dass dies NICHT in Bootstrap eingebettet ist
  • Zweitens, wie kann ich dieses Verhalten erreichen? 
90
Mario Zigliotto

Wenn Sie window.setTimeout(function, delay) aufrufen, können Sie dies erreichen. Im folgenden Beispiel wird der Alarm 2 Sekunden (oder 2000 Millisekunden) nach der Anzeige automatisch geschlossen.

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

Wenn Sie es in eine nette 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önntest du es gerne so benutzen ...

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

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

107
jessegavin

Ich konnte es nicht schaffen, mit Alert zu arbeiten.

Allerdings verwende ich das und es ist ein Vergnügen! Der Alarm wird nach 5 Sekunden ausgeblendet, und sobald er weg ist, gleitet der Inhalt darunter in seine natürliche Position.

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

Ich hatte das gleiche Problem, als ich versuchte, Alarmmeldungen zu behandeln und zu verblassen. Ich suchte an verschiedenen Orten und fand, dass dies meine Lösung war. Das Hinzufügen und Entfernen der Klasse "in" hat mein Problem behoben.

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

}, 5000);

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

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

Die Aktion "Schließen" für die Warnung funktioniert nicht für mich, da sie die Warnung aus dem DOM entfernt und ich die Warnung mehrmals benötige. Also habe ich diese Funktion erstellt, die die Warnung jedes Mal erstellt, wenn ich sie brauche, und dann einen Timer startet, 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 .

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

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

Auf Seite laden

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

Einmal musste die Warnung angezeigt werden

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

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

2
biggles

Dies ist die Coffescript-Version:

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

probier diese

$(function () {

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

        }, 3000)

});
0
danny

Mit Verzögerung und Überblendung:

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

Nachdem ich einige der Antworten hier und in einem anderen Thread durchgegangen bin, habe ich Folgendes erreicht:

Ich habe eine Funktion namens showAlert() erstellt, die mit einer optionalen type und closeDealy eine Warnung dynamisch hinzufügen würde. So können Sie beispielsweise eine Warnung vom Typ danger (d. H. Bootstrap's alert-danger) hinzufügen, die automatisch nach 5 Sekunden 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);     
}
0
isapir

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

In eckig kannst du folgendes machen:

$timeout(self.hideError,2000);

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

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

Nun kann mein Dialog/ui diese Eigenschaften verwenden, um Elemente auszublenden.

0
leeroya