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

Question

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

Answer 1

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

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

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

Answer 2

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

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

Например :