load jquery modal dialog after a delay

问题

I would like to load jquery dialog after a delay of few seconds after page load. Here is my code so far.

<div id="dialog" title="My Dialog Title" style="display:none">
<p>This is My Dialog box Description/Content</p>   

    <script type="text/javascript">

    $(document).ready(function() {    
    setTimeout(function(){
      $(function () {
        $("#dialog").dialog({
            show: {
            effect: 'drop',
            direction : 'up',
            distance: 1000,
            duration: 2000,
            },
        });
      });
    }, 2000)
});


</script>

    <style>
.ui-dialog-titlebar {display:none;}
#other_content {width:200px; height:200px;background-color:grey;}
#dialog_content{display:none;}
</style>

The problem is now that the popup animation of sliding from top is good for Chrome but in firefox it does not come to the center of the screen and for IE there is no popup at all.

http://jsfiddle.net/fakhruddin/x39Rr/9/

Please guide.

回答1:

Use setTimeout() to delay.

$(document).ready(function() {    
    setTimeout(function(){

        $("#dialog").dialog({
            show: {
            effect: 'fade',
            duration: 800,
            },
        });

    }, 2000)
});

回答2:

Try this

$(function(){
 $('yourDiv').dialog({
   autoOpen: false
 });
});

function openMyDialog(){
 $('yourDiv').dialog('open');
}

$(document).ready(function(){
 setTimeout(function(){
    openMyDialog();}, 2000);
});

You can use the jquery slidedown/slideup: http://api.jquery.com/slideUp/

来源：https://stackoverflow.com/questions/17305879/load-jquery-modal-dialog-after-a-delay