JQuery UI Dialog inside of an iframe

Question

I'm developing a sp2013 app, which means it's using iframes. Specifically, it's a very large iframe which takes up most of the screen. At many points, I'm opening up jquery ui dialog windows. They are set to appear in the middle of the viewport, which is great, except it's showing up in the middle of the iframe, rather than the middle of the visible screen.

Is there a way I can tell jquery ui to look at window.top's scroll properties, instead of the iframes?

Edit: The iframe and the parent are on the same domain, so cross-domain issues aren't a problem.

Solution 1

Okay, so I found the solution. When declaring my dialog, I did the following:

$("selector").dialog({
    position: {my: "center", at: "center", of: window.top}
});

Solution 2

HTML:

<div id="dialog">Hello, world!</div>

jQuery:

alert('Window size: '+window.innerWidth);
var dialogWidth = 500;
var dialogHeight = 200;
var dialogX = (window.innerWidth - dialogWidth)/2;
var dialogY = (window.innerHeight - dialogHeight)/2;
$("#dialog").dialog({ position: [dialogX,dialogY], width: dialogWidth, height: dialogHeight }, 500);
alert('Dialog position: '+$("#dialog").dialog( "option", "position" ));

Fiddle: http://jsfiddle.net/3vjsa/3/

Runs inside iframe. Centered horizontally and vertically. If the centered position of the window would fall outside of the iframe, it will be moved to the edge of the iframe. Alert messages added to show window width and dialog position.