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.

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.

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

I solved this issue using <a href="https://stackoverflow.com/questions/15955595/jquery-ui-dialog-inside-of-an-iframe" rel="nofollow">this solution</a>:

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