Centering a jQuery UI dialog box of unknown height - is this possible?

Question

Is there a way to make the jQuery dialog open in the center of the visible window if it is of unknown height?

I have a dialog that opens a dynamically loaded form of unknown height. When you open it for the first time, it shifts slightly at the bottom of the screen. When I close it and open it again, it seems that the top offset is being calculated correctly.

I cannot know the height of the content in advance, so this is a problem for me.

edit: here is sample code

I have two pages - one is a dialog container that creates a dialog box, and the other is a dialog content. When you click on a link, href is used as the landing page for the dialog.

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

Answer 1

You need to specify height: 'auto' to customize the dialog based on its contents.

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

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

@eagerMoose No need to call

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

because there is an autoOpen option in the dialog box, which defaults to true and the dialog opens immediately after creating the instance. The second call to .dialog ('open') is ignored.

EDIT: Since the download is asynchronous, the dialog is probably initialized before the contents are loaded. Try to initialize the dialog at the end of the download.

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

Answer 2

You can capture the height before adjusting the dialog using the height property

$ (window) .height (); // returns the height of the browser view window

$ (document) .height (); // returns the height of the 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'); }); }); 

Alternatively, you can bind .dialog('open') to the end of the call.

An example here is http://jsfiddle.net/BZpPH/1/

UPDATE

The problem sounds like the position of the content. You can use the open event option to have a reset size on opening. 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, the default is top position and it will open the 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'); } }); }); }); 

Answer 3

The offender was the function .load (). This is an ajax call, meaning that the .dialog () function is called before the content has been loaded, so the height of the content was almost a hunch.

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

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