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

Question

我的网页结构如下

它由几个 iframe 元素组成。 Top 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 中的一个错误。升级到最新版本解决了这个问题。

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

jquery dialog changes it's dom location upon being shown

iframe

jquery

dom

jquery-ui

modal-dialog