jquery 对话框在显示时更改它的 dom 位置

Question

我的网页结构如下

它由几个iframe 元素组成。顶部iframe 有一个按钮，当用户按下它时，我想在整个页面上显示modal dialog（而不是顶部iframe）。 因此，我使用以下代码动态创建和附加 dialog 元素：

var context = findMainWindow();//returns the main page window, out of scope
var modalDialog = $('body', context.document).append('<div id="' + dialogName + '" />').find('#' + dialogName);

这段代码有效，我看到元素被注入到主页的 dom 中：

然后我调用.dialog方法来显示它：

  $modalDialog.dialog({
            autoOpen: true,
            modal: true,
            height: h,
            width: w,
            resizable: false,
            close: function () {
                $modalDialog.dialog('destroy');
                $modalDialog.remove();
            }
        });

，但不是在整个页面上显示它，而是将元素移动到 iframe 的 dom 中，初始按钮所在的位置。这是插图：

如何让它显示在整个页面的主体上，注入后元素所属的位置？

Answer 1

对于遇到相同行为的任何人 - 这只是 jquery-ui 中的一个错误。升级到最新版本解决了这个问题。