15

我有一个使用 iframe 的网站。iframe 本身就是网站的内容。现在在 iframe 中我想使用 jQuery 对话框。但是，在使用它时，叠加层和对话框仅显示在 iframe 内而不显示在父级上。我的父 html 为对话框定义了以下 html：

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

在我的 iframe 中，我使用以下 javascript 创建对话框并显示它。

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(); }
});

为了显示我使用的对话框：

dlg1.dialog('open');
4

2 回答 2

26

有一个简单而优雅的解决方案：

  1. 将 jquery 和 jqueryui 包含到您的父窗口中
  2. 在此之后，您可以访问 iframe 中的父 JQuery 对象

例如：

var $jParent = window.parent.jQuery.noConflict();
var dlg1 = $jParent('#modalHolder');
dlg1.dialog();
于 2011-02-19T16:45:45.167 回答
3

因为对话框函数在 iframe 的上下文中运行，所以它将始终创建对话框 div（如半透明背景 div 和对话框 div）作为 iframe 的子级。即使您从父文档中获取元素，实际脚本仍在 iframe 中运行。如果您有 Firefox 和 Firebug，您应该能够使用 HTML 检查器查看发生了什么。

我只能想到两个解决方案：

  1. 使用 jQuery 对话框库的修改版本。我完全不推荐这个
  2. 移动您的 JavaScript，使其在父文档的上下文中执行。
于 2009-12-24T16:46:05.463 回答