jQuery dialog öffnen und schließt automatisch nach 3 Sekunden
Ich versuche zu öffnen ein jQuery-dialog ohne Schaltflächen anzuzeigen, mit einigen Animationen und dann automatisch dort bleiben für etwa 3 Sekunden, dann schließen. Hier ein jsfiddle, was ich denken sollte funktionieren, aber wie Sie sehen können, es ist einfach öffnet und schließt, ohne waitng die 3 Sekunden:
jsfiddle: http://jsfiddle.net/WrdM9/1/
Jemand wissen, wie zu begradigen dieses aus?
Danke!
Du musst angemeldet sein, um einen Kommentar abzugeben.
Sollten Sie verwenden
setTimeout
:Hier das fiddle: http://jsfiddle.net/WrdM9/2/
Verwenden Sie die jQuery-delay-Funktion z.B.
Wenn Sie auch wollen, fügen Sie einige übergänge würde ich nicht empfehlen jQuery slideUp und slideDown Animationen. Diese sind langsam, da es verwendet die CPU anstelle der GPU und die Animationen selbst nicht das Gefühl, völlig Recht.
Ich würde empfehlen, Velocity.js statt. Denken Sie daran, auch hinzufügen, Geschwindigkeit UI js. Und Sie könnte so etwas tun:
Hier ist, wie können Sie tun es einfach mit jQuery, CSS und JavaScript, und die Wiederverwendung der timed-popup mit einer anderen Nachricht jedes mal. Auch in diesem Beispiel nicht nur in der Nähe, aber verblasst in der Nähe.
Erstellen Sie zunächst einen Stil, der zu entfernen Titelleiste. Sie können auch styling für Ihre alert-box, wenn Sie möchten.
Als Nächstes definieren Sie ein modales Dialogfeld. Vergessen Sie nicht, die jQuery in die Seite. Und beachten Sie, dass keine Tasten definiert, die untere Taste Bereich automatisch nicht angezeigt. Sie haben auch die option zum hinzufügen Öffnen und Schließen-Funktionen.
Nun erstellen Sie ein div als popup...
Und schließlich, wenn Sie wollen, um die Verwendung der timed - "alert-box" (eigentlich ein randloses modal popup), umfassen das folgende code-block.
Ihrer Nähe delay-Zeit sollte etwa 80 bis 90% der eingestellten fade-Zeit. Wenn die gleiche, Sie werden sehen, eine leere kleine Rechteck vor dem schließen und verschwinden. Was Sie wollen, ist zu fade wird der text entfernt, aber nahe vor der modal-box Größe ändert.
setTimeout(function() {
$('#bkgOverlay').fadeOut(400);
}, 6000);