Показать JQuery диалог в родительском окне - PullRequest
Новая
       25

Показать JQuery диалог в родительском окне

15 голосов
/ 24 декабря 2009

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

Ответы [ 2 ]

26 голосов
/ 19 февраля 2011

Есть простое и изящное решение:

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

Например: 

var $jParent = window.parent.jQuery.noConflict();
var dlg1 = $jParent('#modalHolder');
dlg1.dialog();
3 голосов
/ 24 декабря 2009

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

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

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