Отобразить диалоговое окно 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');

Ответы

Ответ 1

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

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

  • Использовать измененную версию диалоговой библиотеки jQuery. Я вообще не рекомендую это
  • Переместите свой JavaScript так, чтобы он выполнялся в контексте родительского документа.

Ответ 2

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

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

Например:

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