jquery - jQuery Ui 对话框不显示

Question

我有一个 div 容器，在页面加载时最初是隐藏的。在那个 div 里面我有一个容器，里面有我的对话内容：

<div style="display:none;" id="dialog-container">
    content
</div>

我遇到的问题是，当用户单击链接打开对话框时：

jQuery("#dialog-link").click(function() {

    //shows modal box

    jQuery( "#dialog-container" ).dialog({
        width:"820",
        resizable: false, 
        modal: true,
        buttons: {
            Ok: function() {
                jQuery( this ).dialog( "close" );
            }
        }
    });

});//close click

覆盖显示，但对话框本身无处可见。我究竟做错了什么？div最初隐藏的事实与它有关吗？

谢谢。

更新

我找到了问题，但仍然没有解决方案。.ui-dialog 类的 'top' 属性太高了，因此对话框打开时远离屏幕。

Answer 1

确保显示要删除的对话框容器display:none

jQuery("#dialog-link").click(function() {


//shows modal box

  jQuery( "#dialog-container" ).dialog({
     width:"820",
     resizable: false, 
     modal: true,
     buttons: {
        Ok: function() {
          jQuery( this ).dialog( "close" );
        }
     }
   });

   jQuery( "#dialog-container" ).show(); //make visible
});

工作示例：http: //jsfiddle.net/