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的边缘。添加警报消息以显示窗口宽度和对话框位置。

iframe中的JQuery UI Dialog

2 个答案: