CODEWITHSUNDEEP
jqueryjquery-uidialog
jeffery_the_wind
jeffery_the_wind

Reputation: 18238

jQuery dialog open and automatically close after 3 seconds

I am trying to open a jQuery dialog with no buttons to display with some animations and then automatically stay there for like 3 seconds, then close. Here is a jsfiddle of what I think should work, but as you can see it just opens and closes without waitng the 3 seconds:

jsfiddle: http://jsfiddle.net/WrdM9/1/

Anyone know how to straighten this out? Thanks!

Upvotes: 9

Views: 23292

Answers (5)

rsnr4u
rsnr4u

Reputation: 141

setTimeout(function() {
    $('#bkgOverlay').fadeOut(400);
}, 6000);

Upvotes: 0

GAG and Spice
GAG and Spice

Reputation: 36

Here's how you can do it with just jQuery, CSS and JavaScript, and reuse the timed popup with a different message each time. Also this example doesn't just close but fades close.

First, create a style to remove titlebar. You can also add styling for your alert box if you like.

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

Next, define a modal dialog. Don't forget to include jQuery in your page. And note that with no buttons defined, the lower button area is automatically not displayed. You also have the option of adding Open and Close functions.

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

Now create a div to use as the popup...

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

And finally, anytime you want to use the timed "alert box" (actually a borderless modal popup), include the following block of code.

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

Your close delay time should be about 80 to 90% of the fade time. If the same, you'll see an empty small rectangle before closing and disappearing. What you want is to fade the text away but close before the modal box changes size.

Upvotes: 0

Martin
Martin

Reputation: 11336

If you also want to add some transitions I wouldn't recommend jQuery slideUp and slideDown animations. Those are slow since it uses CPU instead of GPU and the animations themselves don't feel totally right.

I would recommend Velocity.js instead. Remember to also add Velocity UI js. And you could do something like this:

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

Upvotes: 1

Shao Khan
Shao Khan

Reputation: 450

Use the jQuery delay function e.g.

$( "#your-modal-id" ).slideDown( 300 ).delay( 800 ).slideUp( 400 );

Upvotes: 2

Joseph Silber
Joseph Silber

Reputation: 220136

You should use setTimeout:

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

Here's the fiddle: http://jsfiddle.net/WrdM9/2/

Upvotes: 18

Related Questions