Bootstrap Alert Auto Close
Ich muss einen Alarm auslösen, wenn ich auf die Schaltfläche Zur Wunschliste hinzufügen klicke und der Alarm in 2 Sekunden verschwunden ist. So habe ich es versucht, aber die Warnung verschwindet sofort, sobald sie erscheint. Nicht sicher, wo der Fehler liegt .. Kann mir jemand helfen?
JS-Skript
$(document).ready (function(){
$("#success-alert").hide();
$("#myWish").click(function showAlert() {
$("#success-alert").alert();
window.setTimeout(function () {
$("#success-alert").alert('close'); }, 2000);
});
});
HTML Quelltext:
<div class="product-options">
<a id="myWish" href="" class="btn btn-mini" >Add to Wishlist </a>
<a href="#" class="btn btn-mini"> Purchase </a>
</div>
Benachrichtigungsbox:
<div class="alert alert-success" id="success-alert">
<button type="button" class="close" data-dismiss="alert">x</button>
<strong>Success! </strong>
Product have added to your wishlist.
</div>
Für einen reibungslosen Slideup:
$("#success-alert").fadeTo(2000, 500).slideUp(500, function(){
$("#success-alert").slideUp(500);
});
Die Verwendung einer fadeTo(), die innerhalb von 2 Sekunden in "I Can Has Kittenz" -Code auf eine Opazität von 500 reduziert wird, ist für mich nicht lesbar. Ich denke, es ist besser, andere Optionen wie ein delay () zu verwenden.
$(".alert").delay(4000).slideUp(200, function() {
$(this).alert('close');
});
Warum alle anderen Antworten slideUp verwenden, liegt mir einfach nicht. Da ich die Klassen fade und in verwende, um den Alarm nach dem Schließen (oder nach dem Zeitlimit) auszublenden, möchte ich nicht, dass er "nach oben rutscht" und in Konflikt damit steht.
Außerdem hat die slideUp-Methode nicht funktioniert. Die Warnung selbst wurde überhaupt nicht angezeigt. Was für mich perfekt funktioniert hat:
$(document).ready(function() {
// show the alert
setTimeout(function() {
$(".alert").alert('close');
}, 2000);
});
Ich fand das eine bessere Lösung
$(".alert-dismissible").fadeTo(2000, 500).slideUp(500, function(){
$(".alert-dismissible").alert('close');
});
eine weitere Lösung hierfür Die Bootstrap-Warnmeldung nach 5 Sekunden automatisch schließen oder ausblenden:
Dies ist der HTML-Code, der zum Anzeigen der Nachricht verwendet wird:
<div class="alert alert-danger">
This is an example message...
</div>JS Snippet
<script type="text/javascript">
$(document).ready(function () {
window.setTimeout(function() {
$(".alert").fadeTo(1000, 0).slideUp(1000, function(){
$(this).remove();
});
}, 5000);
});
</script>$("#success-alert").fadeTo(2000, 500).slideUp(500, function(){
$("#success-alert").alert('close');
});
Wo fadeTo-Parameter sind fadeTo (Geschwindigkeit, Deckkraft)
Tiggers automatisch und manuell bei Bedarf
$(function () {
TriggerAlertClose();
});
function TriggerAlertClose() {
window.setTimeout(function () {
$(".alert").fadeTo(1000, 0).slideUp(1000, function () {
$(this).remove();
});
}, 5000);
}