Mostrar el cuadro de diálogo de jquery en la ventana principal

Question

Tengo un sitio web que usa un iframe. El iframe en sí es el contenido del sitio web. Ahora en el iframe me gustaría usar el diálogo jQuery. Sin embargo, al usarlo, la superposición y el diálogo solo se muestran dentro del iframe que no está en el elemento primario. Mi html padre tiene el siguiente código HTML definido para el diálogo:

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

En mi iframe Estoy utilizando el siguiente JavaScript para crear el diálogo y para demostrarlo.

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

Para mostrar el cuadro de diálogo que utilizo esto:

dlg1.dialog('open'); 

Answer 1

Dado que la función de diálogo se está ejecutando en el contexto del marco flotante, que siempre va a crear los divs de diálogo (como el fondo div semi transparente y el diálogo div) como hijos del iframe. Aunque está tomando el elemento del documento principal, el script real todavía se está ejecutando en el iframe. Si tiene Firefox y Firebug, debería poder usar el inspector HTML para ver qué está pasando.

sólo puedo pensar en dos soluciones:

1. utiliza una versión modificada de la biblioteca de diálogo jQuery. No lo recomiendo en absoluto
2. Mueva su JavaScript para que se ejecute dentro del contexto del documento principal.

Answer 2

hay solución simple y elegante:

1. Incluir jQuery y jqueryui en su ventana padre
2. Después de esto se puede acceder a la jQuery objeto padre dentro de iframe

Por ejemplo :

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