在父窗口中显示jQuery对话框 [英] Display jquery dialog in parent window

问题描述

我有一个使用iframe的网站. iframe本身就是网站的内容.现在，在iframe中，我想使用jQuery对话框.但是，使用它时，覆盖图和对话框仅显示在iframe中，而不显示在父项上.我的父html为对话框定义了以下html:

I have a website, that uses an iframe. The iframe itself is the content of the website. Now in the iframe I would like to use the jQuery Dialog. However when using it, the overlay and dialog is only displayed inside the iframe not on the parent. My parent html has the following html defined for the dialog:

<div id="modalHolder"></div>

在我的iframe中，我正在使用以下javascript创建对话框并显示该对话框.

In my iframe I am using the following javascript to create the dialog and to show it.

dlg1 = $(window.parent.document.getElementById("modalHolder"));
dlg1 = dlg1.dialog({
    width: 300,
    height: 150,
    modal: true,
    autoOpen: false,
    resizable: false,
    closeOnEscape: false,
    draggable: false,
    overlay: 
    {
        backgroundColor: 'red',
        opacity: 0.65
    },
    open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); }
});

要显示该对话框，我使用以下方法:

To show the dialog I use this:

dlg1.dialog('open');

推荐答案

由于对话框函数是在iframe的上下文中运行的，因此它将始终以以下方式创建对话框div(例如半透明的背景div和对话框div): iframe的子级.即使您从父文档中获取元素，实际的脚本仍在iframe中运行.如果您拥有Firefox和Firebug，则应该能够使用HTML检查器查看正在发生的事情.

Because the dialog function is running within the context of the iframe, it will always create the dialog divs (like the semi transparent background div and the dialog div) as children of the iframe's . Even though you're grabbing the element from the parent document, the actual script is still running in the iframe. If you have Firefox and Firebug, you should be able to use the HTML inspector to see what's going on.

我只能想到两种解决方案:

I can only think of two solutions:

1. 使用jQuery对话框库的修改版本.我一点都不推荐
2. 移动您的JavaScript，使其在父文档的上下文中执行.

这篇关于在父窗口中显示jQuery对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！