Afficher la boîte de dialogue jquery dans la fenêtre parent

Question

J'ai un site Web qui utilise un iframe. L'iframe lui-même est le contenu du site Web. Maintenant, dans l'iframe, je voudrais utiliser le dialogue jQuery. Cependant, lorsque vous l'utilisez, la superposition et la boîte de dialogue ne sont affichées qu'à l'intérieur de l'iframe et non sur le parent. Mon html parent a le code HTML suivant défini pour la boîte de dialogue:

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

Dans mon iframe j'utilise le javascript suivant pour créer la boîte de dialogue et de le montrer.

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

Pour afficher la boîte de dialogue J'utilise ceci:

dlg1.dialog('open'); 

Answer 1

Parce que la fonction de dialogue est en cours d'exécution dans le cadre de l'iframe, il crée toujours les divs de dialogue (comme l'arrière-plan semi-transparent div et le dialogue div) en tant qu'enfants de l'iframe. Même si vous récupérez l'élément à partir du document parent, le script actuel est toujours en cours d'exécution dans l'iframe. Si vous avez Firefox et Firebug, vous devriez pouvoir utiliser l'inspecteur HTML pour voir ce qui se passe.

je ne peux penser à deux solutions:

1. utiliser une version modifiée de la bibliothèque de dialogue jQuery. Je ne recommande pas du tout
2. Déplacez votre JavaScript afin qu'il s'exécute dans le contexte du document parent.

Answer 2

Il y a une solution simple et élégante:

1. Inclure jquery et jQueryUI dans votre fenêtre parent
2. Après cela, vous pouvez accéder à l'objet parent JQuery dans les iframe

Par exemple :

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