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!

InformationsquelleAutor jeffery_the_wind | 2012-04-16
  1. 18

    Sollten Sie verwenden setTimeout:

    open: function(event, ui) {
    setTimeout(function(){
        $('#dialog').dialog('close');                
    }, 3000);
}

    Hier das fiddle: http://jsfiddle.net/WrdM9/2/

    • Genial, vielen Dank!
    InformationsquelleAutor Joseph Silber
  2. 2

    Verwenden Sie die jQuery-delay-Funktion z.B.

    $( "#your-modal-id" ).slideDown( 300 ).delay( 800 ).slideUp( 400 );
    InformationsquelleAutor Shao Khan
  3. 1

    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:

    $( "#your-modal-id" ).velocity('transition.slideUpBigOut', { delay: 3000 })
    InformationsquelleAutor Martin
  4. 0

    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.

    <style>
.noTitleStuff .ui-dialog-titlebar {display:none;}
</style>

    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.

    <script type="text/javascript">
//-- dialog-form0 - Modal Alert --//
$( ".dialog-form0" ).dialog({
    autoOpen: false,
    height: 50,
    width: 600,
    modal: true,
    dialogClass: 'noTitleStuff',
    buttons: {
    },
    open: function() {
    },
    close: function() {
    }
});
</script>

    Nun erstellen Sie ein div als popup...

    <!-- Popup0 for alert -->
<div id="popup0" class="dialog-form0" title="">
    <div id="alert0"></div>
</div><!--//popup0 -->

    Und schließlich, wenn Sie wollen, um die Verwendung der timed - "alert-box" (eigentlich ein randloses modal popup), umfassen das folgende code-block.

    <script type="text/javascript">
$(function(){
    $("#clientcustomer").on("change", function(event){
        event.preventDefault();
        document.getElementById('alert0').innerHTML = "Here's an alert message...";
        $( ".dialog-form0" ).dialog( "open" );
        setTimeout(function(){
            $("#popup0" ).fadeOut(1000, function () { });   //This is the fade time
            setTimeout(function(){
                $( ".dialog-form0" ).dialog( "close" )
            },850); //set the time here for close delay
            //$( ".dialog-form0" ).dialog( fadeOut(2000) );
        },500); //set the time here for how long to display
    });
});
</script>

    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.

    InformationsquelleAutor GAG and Spice
  5. 0

    setTimeout(function() {

    $('#bkgOverlay').fadeOut(400);

    }, 6000);

    InformationsquelleAutor rsnr4u
Schreibe einen Kommentar