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

Posted

技术标签:

【中文标题】jquery 对话框在显示时更改它的 dom 位置【英文标题】:jquery dialog changes it's dom location upon being shown 【发布时间】:2015-06-16 01:45:28 【问题描述】:

我的网页结构如下

它由几个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 中,初始按钮所在的位置。这是插图:

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

【问题讨论】:

【参考方案1】:

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

【讨论】:

以上是关于jquery 对话框在显示时更改它的 dom 位置的主要内容,如果未能解决你的问题,请参考以下文章

DOM 元素布局更改事件

jquery - dom 操作

隐藏后显示元素时JQuery位置没有信息

JQuery 对话框标题不跟随 mousemove

用jquery的easyui 创建窗口之类的对话框,关闭后会清除掉相关dom数据吗?

使用固定位置时,jQuery UI 对话框离开屏幕