延迟后加载jquery模式对话框

时间:2013-06-25 19:29:29

标签: php jquery jquery-ui-dialog

我想在页面加载后延迟几秒后加载jquery对话框。到目前为止,这是我的代码。

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

现在的问题是从顶部滑动的弹出动画对Chrome有好处,但在Firefox中它不会出现在屏幕的中心,对于IE来说根本就没有弹出窗口。

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

请指导。

2 个答案:

答案 0 :(得分:1)

使用setTimeout()延迟。

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

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

    }, 2000)
});

答案 1 :(得分:0)

试试这个

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

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

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

您可以使用jquery slidedown / slideup:http://api.jquery.com/slideUp/