wake-up-neo.com

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>
123
srikanth_naalla

Für einen reibungslosen Slideup:

$("#success-alert").fadeTo(2000, 500).slideUp(500, function(){
    $("#success-alert").slideUp(500);
});

Fiddle

235

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

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

Ich fand das eine bessere Lösung

$(".alert-dismissible").fadeTo(2000, 500).slideUp(500, function(){
    $(".alert-dismissible").alert('close');
});
18
Jaimie

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>

10
$("#success-alert").fadeTo(2000, 500).slideUp(500, function(){
    $("#success-alert").alert('close');
});

Wo fadeTo-Parameter sind fadeTo (Geschwindigkeit, Deckkraft)

1
Marwah Abdelaal

Tiggers automatisch und manuell bei Bedarf

$(function () {
    TriggerAlertClose();
});

function TriggerAlertClose() {
    window.setTimeout(function () {
        $(".alert").fadeTo(1000, 0).slideUp(1000, function () {
            $(this).remove();
        });
    }, 5000);
}
0
Arun Prasad E S