JQuery UI对话框显示在页面上，而不是弹出

我有一个jqueryUI对话框弹出显示在页面上…并在需要时弹出。一些奇怪的功能。div内的任何内容都将显示在页面上，而弹出窗口将工作，但没有div上的内容。我试图在文档准备好之前创建弹出窗口。下面是我的对象正在运行的代码，再次在文档准备好之前。

    var edit_div=document.createElement('div');                 
    var me = this;
    $(edit_div).dialog(
        {
            autoOpen: false,
            height: 400,
            width: 600,
            resizable: false,
            modal: true,
            buttons: 
            {
                "Submit": function() 
                {
                    me.submitForm();
                },
                Cancel: function() 
                {
                    $( this ).dialog( "close" );
                }
            },
            close: function() 
            {
            },
        });

如果我将对话框创建代码移动到一个单独的函数中，并在文档准备好时调用该函数，则弹出框可以正常工作，如下所示:

$(document).ready(function()
{
   mfg_table.init();
}

和创建对话框的初始化代码

   this.init = function()
    {
        //alert('initing');
        var me = this;
        $('#' +this.table_id + this.edit_table_name).dialog(
            {
                autoOpen: false,
                height: 400,
                width: 600,
                resizable: false,
                modal: true,
                buttons: 
                {
                    "Submit": function() 
                    {
                        me.submitForm();
                    },
                    Cancel: function() 
                    {
                        $( this ).dialog( "close" );
                    }
                },
                close: function() 
                {
                },
            });
    }

那么为什么我不能在渲染页面之前在DOM对象上创建对话框呢?