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?
javascript
jquery
css
twitter-bootstrap
alert
Mario Zigliotto
quelle
quelle
Antworten:
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.Wenn Sie es in eine raffinierte Funktion einwickeln möchten, können Sie dies tun.
Dann könnten Sie es so verwenden ...
Ich bin sicher, dass es elegantere Wege gibt, dies zu erreichen.
quelle
$('#myAlert').alert('close')
funktioniert nicht wie angekündigt.$('#my_fancy_alert').createAutoClosingAlert(2000)
. Sie müssen nur passieren$(this).remove()
oder$(this).alert('close')
insetTimeout
Rückruf.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.
quelle
.alert-message
? Haben Sie Probleme, ist die Klasse auf meinem BS3 Alarmalert alert-danger alert-block
, so sollte ich verwenden.alert
,alert-danger
oder die vollständigen Klassennamen in der Timeout - Funktion?$(".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 ...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.
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.)
quelle
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:
quelle
Dies ist die Coffescript-Version:
quelle
Mit jeder der oben genannten Lösungen verlor ich weiterhin die Wiederverwendbarkeit der Warnung. Meine Lösung war wie folgt:
Beim Laden der Seite
Sobald die Warnung angezeigt werden musste
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.
quelle
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 optionalentype
und hinzufügtcloseDealy
. So können Sie beispielsweise eine Warnung vom Typdanger
(dh die Warngefahr von Bootstrap) hinzufügen , die nach 5 Sekunden automatisch geschlossen wird.Fügen Sie dazu die folgende Javascript-Funktion hinzu:
quelle
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:
Hier ist die Funktion, die ich aufrufe, wenn das Timeout erreicht ist
Jetzt kann meine dialog / ui diese Eigenschaften verwenden, um Elemente auszublenden.
quelle
Mit Verzögerung und Verblassen:
quelle
Probier diese
quelle