Wyświetl okno dialogowe jquery w oknie nadrzędnym

Question

Mam witrynę internetową, która używa elementu iframe. Sam element iframe jest treścią witryny. Teraz w iframe chciałbym użyć okna dialogowego jQuery. Jednak podczas korzystania z niego nakładka i okno dialogowe są wyświetlane tylko wewnątrz elementu iframe, a nie w elemencie nadrzędnym. Mój rodzic ma następujący html html zdefiniowany dla okna:

<div id="modalHolder"></div> 

W moim iframe używam następujący skrypt do tworzenia okna i pokazać.

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(); } 
}); 

Aby wyświetlić okno Używam tego:

dlg1.dialog('open'); 

Answer 1

Ponieważ funkcja dialogowe jest uruchomione w ramach iframe, zawsze będzie tworzyć DIV dialogowych (jak pół przezroczyste tło div i dialog div) jako dzieci iframe. Mimo że pobierasz element z dokumentu nadrzędnego, rzeczywisty skrypt nadal działa w elemencie iframe. Jeśli masz Firefoksa i Firebuga, powinieneś być w stanie użyć kontrolera HTML, aby zobaczyć, co się dzieje.

mogę myśleć tylko z dwóch rozwiązań:

1. pomocą zmodyfikowanej wersji biblioteki jQuery dialogowym. Nie polecam tego w ogóle
2. Przenieś JavaScript tak, aby był wykonywany w kontekście dokumentu nadrzędnego.

Answer 2

Jest prosty i wdzięku rozwiązanie:

1. Dołącz jQuery i jQueryUI do swojego okna nadrzędnego
2. Po tym można uzyskać dostęp do nadrzędnego JQuery obiektu wewnątrz iframe

Na przykład :

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