javascript iframe 内的 JQuery UI 对话框
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/15955595/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery UI Dialog inside of an iframe
提问by Colin DeClue
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.
我正在开发一个 sp2013 应用程序,这意味着它使用 iframe。具体来说,它是一个非常大的 iframe,占据了大部分屏幕。在很多时候,我打开了 jquery ui 对话框窗口。它们被设置为出现在视口的中间,这很好,只是它出现在 iframe 的中间,而不是可见屏幕的中间。
Is there a way I can tell jquery ui to look at window.top's scroll properties, instead of the iframes?
有没有办法让 jquery ui 查看 window.top 的滚动属性,而不是 iframe?
Edit: The iframe and the parent are on the same domain, so cross-domain issues aren't a problem.
编辑:iframe 和父级位于同一个域中,因此跨域问题不是问题。
回答by Colin DeClue
Okay, so I found the solution. When declaring my dialog, I did the following:
好的,所以我找到了解决方案。在声明我的对话框时,我执行了以下操作:
$("selector").dialog({
position: {my: "center", at: "center", of: window.top}
});
回答by Mooseman
HTML:
HTML:
<div id="dialog">Hello, world!</div>
jQuery:
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.
小提琴:http: //jsfiddle.net/3vjsa/3/
在 iframe 内运行。水平和垂直居中。如果窗口的居中位置落在 iframe 之外,它将被移动到 iframe 的边缘。添加了警报消息以显示窗口宽度和对话框位置。