JQuery UI Dialog Positioning Center of Parent

Question

I have a functioning snippet as follows...

function LoadTheDialog($url) {
  $dialog = $('<div></div>');
  $dialog.html('<iframe id="theDialog" src="' + $url + '"  width="530px" height="600px" style="border: 0px;"></iframe>');
  $dialog.dialog({ width: 555, modal: true, resizable: false, draggable: false, 
    open: function (type, data) { $($dialog).parent().appendTo("body"); }
  }).dialog('widget').position({ my: "center", at: "center", of: window, collision: "none" }); 
};

no matter what I have tried thus far, the dialog always shows up at top left of the browser...

Am I missing something obvious?

I would also like to bag the static width & height and have it auto size to the size of the loaded remote content but those options do not seem to work as anticipated either...

thanks in advance.

Answer 1

I solved this issue using this solution:

position: {my: "center", at: "center", of: window.top}

Answer 2

Have you tried to also set the height in the jQuery UIDialog.
I fixed the problem by setting the height and width of the dialog to the same of the iFrame.

Answer 3

ok solved.

You need to call you dialog like this:

window.parent.jQuery(>>the html or variable of your dialog<<).dialog({ >>the options<<  });

so that way it gets appended to the parent document and gets back to normal positioning.