Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JQuery UI Dialog inside of an iframe

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.

like image 981
Colin DeClue Avatar asked Jan 14 '23 16:01

Colin DeClue


2 Answers

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

$("selector").dialog({
    position: {my: "center", at: "center", of: window.top}
});
like image 194
Colin DeClue Avatar answered Jan 17 '23 14:01

Colin DeClue


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.

like image 34
Mooseman Avatar answered Jan 17 '23 12:01

Mooseman