在父窗口中顯示jquery對話框

我有一個網站，使用iframe。 iframe本身就是網站的內容。現在在iframe中，我想使用jQuery對話框。但是，使用它時，疊加層和對話框只顯示在不在父級上的iframe中。我的父母HTML先後爲對話框中定義的HTML如下：在父窗口中顯示jquery對話框

<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');

來源

2009-12-24 vikasde

因爲對話框功能的iframe的上下文中運行時，它總是會創建對話框的div（如半透明背景股利和對話框div）作爲iframe的子項。即使您從父文檔中獲取元素，實際腳本仍在iframe中運行。如果你有Firefox和Firebug，你應該可以使用HTML檢查器來查看發生了什麼。

我只能想到兩種解決方案：

使用jQuery的對話框庫的修改版本。我根本不推薦這樣做
移動您的JavaScript，以便它在父文檔的上下文中執行。

來源

2009-12-24 16:46:05 CalebD

其實，你可能是能夠在創建後將對話框div從iframe移動到父文檔，但這確實很難看。就像..＃（'。ui-widget-overlay，ui-dialog'）。appendTo（window.parent.document.body）; – CalebD 2009-12-24 16:47:57

你說得對。它看起來會將「modalHolder」從父級移動到iframe中。我會將我的js從孩子移到父母身上。我試圖避免這種情況。不管怎麼說，多謝拉！ – vikasde 2009-12-24 16:48:36

我可以將元素移動到父元素，但是他們的高度/寬度需要重新計算。 – vikasde 2009-12-24 16:50:51

有簡單而優雅的解決方案：

包括jQuery和jQueryUI的進入你的父窗口
這個你可以IFRAME

內訪問父jQuery對象例如後：

var $jParent = window.parent.jQuery.noConflict(); 
var dlg1 = $jParent('#modalHolder'); 
dlg1.dialog();

來源

2011-02-19 16:45:45 Dmitry

，這讓我的生活突然變得更加輕鬆。 – Christian 2012-12-17 16:24:32

一個很好的解決方案:) – Roylee 2013-05-28 02:28:34

+1，但如果可以的話，我會讚揚更多！這應該是被接受的答案。 – 2013-08-15 13:59:08

在父窗口中顯示jquery對話框

回答

相關問題