Centering jQuery UI dialog of unknown height - is it possible?

Is there a way of making a jQuery dialog opening in the center of the visible window if it's of an unknown height?

I have a dialog that opens a dynamically loaded form of unknown height. When opening it the first time, it's slightly offset towards the bottom of the screen. When I close it and open it again,开发者_JAVA百科 it seems that the top offset is calculated properly.

I can't know the content height in advance so this is kind of an issue for me.

edit: here's an example code

I have two pages - one is the dialog container which instantiates the dialog, and another is the dialog content. When a link is clicked, it's href is used as a target page for the dialog.

$(document).ready(function(){
    $(a).click(function(){
        $("#dialog").load($(this).attr('href'))
        .dialog({
            modal: true,
            width: 400
        });
        $("#dialog").dialog('open');
    });
});

---

You need to specify height: 'auto' to make the dialog adjust based on its content.

.dialog({
    height: 'auto',
});

@jon3laze The default value for "position" is 'center', so no need to set it in open callback function.

@eagerMoose There is no need to call the

$("#dialog").dialog('open');

because dialogs have an autoOpen option, which defaults to true and dialog is being opened immediately after instantiation. The second call to .dialog('open') is ignored.

EDIT: because load is asynchronous the dialog is probably initialized before the content is loaded. Try to initialize the dialog in the load complete.

$(document).ready(function(){
    $(a).click(function(){
        $("#dialog").load($(this).attr('href'), function(){
            $(this).dialog({
                modal: true,
                width: 400
            });
        });
    });
});

---

You can grab the height before setting the dialog using the height property

$(window).height(); // returns height of browser viewport

$(document).height(); // returns height of HTML document

$(document).ready(function(){

    var h = $(document).height();

    $(a).click(function(){
        $("#dialog").load($(this).attr('href'))
        .dialog({
            modal: true,
            width: 400,
            height: h
        }).dialog('open');
    });
});

Also, you can chain the .dialog('open') on to the end of the call.

Example here http://jsfiddle.net/BZpPH/1/

UPDATE

The issue sounds like the position of the content. You can use the open event option to have it reset the size upon open. I can't get this to work on jsfiddle because I can't figure out how to get the .load() method to work. However I tried this on my own server, defaulted the position to top and it would open center of the screen.

$(a).click(function() {
    $('#dialog').load($(this).attr('href'))
        .dialog({
            modal: true,
            width: 400,
            height: 'auto',
            open: function() {
                $(this).dialog('option', 'position', 'center');
            }
        });
    });
});

---

The culprit was the .load() function. This is an ajax call meaning the .dialog() function gets called before the content was actually loaded, so the content height was practically guesswork.

I managed to solve the problem by defining dialog and its actions inside the .load() function, like this

$(document).ready(function(){
    $(a).click(function(){
        $("#dialog").load($(this).attr('href'), function(){
            $(this).dialog({
                modal: true,
                width: 400
             });
        });
    });
 });