javascript - iframe 内的 JQuery UI 对话框

Question

我正在开发一个 sp2013 应用程序，这意味着它正在使用 iframe。具体来说，它是一个非常大的 iframe，占据了大部分屏幕。在很多时候，我正在打开 jquery ui 对话框窗口。它们被设置为出现在视口的中间，这很好，只是它显示在 iframe 的中间，而不是可见屏幕的中间。

有没有办法告诉 jquery ui 查看 window.top 的滚动属性，而不是 iframe？

编辑： iframe 和父级在同一个域上，所以跨域问题不是问题。

Answer 1

好的，所以我找到了解决方案。在声明我的对话框时，我执行了以下操作：

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

Answer 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" ));

小提琴： http: //jsfiddle.net/3vjsa/3/

在 iframe 中运行。水平和垂直居中。如果窗口的中心位置落在 iframe 之外，它将被移动到 iframe 的边缘。添加了警报消息以显示窗口宽度和对话框位置。