JQuery UI Dialog shows on page instead of popup

问题

I have a jqueryUI dialog popup that is showing on the page... and popping up when requested. Some odd functionality. Anything within the div will show on the page, and the popup will work however be without the contents on the div. I am trying to create the popup before the document is ready. Here is the code that my object is running, again before document ready.

    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() 
            {
            },

        });

The popup works correctly if I move the dialog creation code to a separate function and call that when the document is ready like so:

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

And the init code to create the dialog

   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() 
                {
                },

            });
    }

So why can't I create the dialog on the DOM object before rendering of the page?

回答1:

Is it possible your script is being called before your jquery.js files are being loaded by the browser?

Document.ready waits until the page is fully loaded before running your code. The fact that it isn't working correctly without it, implies that the necessary resources aren't being loaded before you try to run your script.

You may want to try to move your inline script to the very end of your html file, particularly after all your .js and plugin files have been referenced.

I wish I could be more specific, but it's hard to see whats going on without more of the code or a live example.

来源：https://stackoverflow.com/questions/32440042/jquery-ui-dialog-shows-on-page-instead-of-popup