Отображать диалоговое окно jquery в родительском окне

У меня есть веб-сайт, который использует 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');

jquery-ui-dialog
person vikasde    schedule 24.12.2009    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Поскольку функция диалога выполняется в контексте iframe, она всегда будет создавать элементы div диалога (например, полупрозрачный фон div и div диалога) как дочерние элементы iframe. Несмотря на то, что вы берете элемент из родительского документа, фактический скрипт все еще работает в iframe. Если у вас есть Firefox и Firebug, вы сможете использовать инспектор HTML, чтобы увидеть, что происходит.

Я могу думать только о двух решениях:

  1. Используйте модифицированную версию библиотеки диалогов jQuery. Я не рекомендую это вообще
  2. Переместите свой JavaScript так, чтобы он выполнялся в контексте родительского документа.
person CalebD    schedule 24.12.2009
comment
На самом деле, вы могли бы переместить диалоговые элементы div из iframe в родительский документ после их создания, но это было бы очень некрасиво. Что-то вроде .. #('.ui-widget-overlay, ui-dialog').appendTo(window.parent.document.body); - person CalebD; 24.12.2009
comment
Ты прав. Похоже, он перемещает modalHolder из родителя в iframe. Я перенесу свои js от ребенка к родителю. Я пытался избежать этого. В любом случае спасибо! - person vikasde; 24.12.2009
comment
Я мог бы переместить элементы к родителю, однако их высота/ширина должны быть пересчитаны. - person vikasde; 24.12.2009
comment
3) - Используйте jQuery, определенный в родительском контексте, по Дмитрию. - person Justin Ethier; 15.08.2013

arrow_upward
26
arrow_downward

Существует простое и изящное решение:

  1. Включите jquery и jqueryui в ваше родительское окно.
  2. После этого вы можете получить доступ к родительскому объекту JQuery в iframe.

Например:

var $jParent = window.parent.jQuery.noConflict();
var dlg1 = $jParent('#modalHolder');
dlg1.dialog();
person Dmitry    schedule 19.02.2011
comment
это сделало мою жизнь внезапно намного легче. - person Christian; 17.12.2012
comment
+1, но я бы проголосовал гораздо больше, если бы мог! Это должен быть принятый ответ. - person Justin Ethier; 15.08.2013
comment
После этого я обнаружил, что jQuery в родительском окне больше не работает, когда на него ссылаются как $ . Чтобы исправить это, я просто удалил .noConflict() из приведенного выше кода. - person Val; 04.03.2014
comment
Когда я попробовал эту консоль, она говорит, что $ jParent не определено? Я включил jquery в родительское окно - person alwaysLearn; 30.01.2015