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

我的网页结构如下

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

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

，但它不会在整个页面上显示它，而是将元素移动到iframe的dom中，初始按钮位于该dom中。以下是示例：

---

如何在整个页面的主体上显示元素在注入后属于何处？

对于遇到相同行为的人来说，这只是jquery ui中的一个bug。升级到最新版本解决了此问题

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