पैरेंट विंडो में jquery संवाद प्रदर्शित करें

Question

मेरे पास एक वेबसाइट है, जो एक आईफ्रेम का उपयोग करती है। आईफ्रेम स्वयं वेबसाइट की सामग्री है। अब iframe में मैं jQuery संवाद का उपयोग करना चाहता हूँ। हालांकि इसका उपयोग करते समय, ओवरले और संवाद केवल आईफ़्रेम के अंदर प्रदर्शित होता है जो माता-पिता पर नहीं होता है।

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

मेरी iframe में मैं निम्नलिखित जावास्क्रिप्ट का उपयोग कर रहा संवाद बनाने के लिए और यह दिखाने के लिए: मेरे माता पिता एचटीएमएल निम्नलिखित एचटीएमएल संवाद के लिए परिभाषित किया गया है।

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

क्योंकि संवाद समारोह आइफ्रेम के संदर्भ में चल रहा है, यह हमेशा संवाद divs (अर्ध पारदर्शी पृष्ठभूमि div की तरह पैदा करेगा और संवाद div) iframe के बच्चों के रूप में। भले ही आप मूल दस्तावेज़ से तत्व को पकड़ रहे हों, फिर भी वास्तविक स्क्रिप्ट आईफ्रेम में चल रही है। यदि आपके पास फ़ायरफ़ॉक्स और फ़ायरबग है, तो आप यह देखने के लिए HTML निरीक्षक का उपयोग करने में सक्षम होना चाहिए कि क्या हो रहा है।

मैं केवल दो समाधान के बारे में सोच सकते हैं:

1. jQuery संवाद पुस्तकालय का एक संशोधित संस्करण का उपयोग करें। मैं इसकी सभी सिफारिश नहीं करता
2. अपनी जावास्क्रिप्ट को ले जाएं ताकि यह मूल दस्तावेज़ के संदर्भ में निष्पादित हो सके।

Answer 2

वहाँ सरल और सुंदर समाधान है:

1. अपने माता पिता के विंडो में jQuery और jQueryUI शामिल
2. इस आप iframe

भीतर माता पिता JQuery वस्तु के लिए उपयोग कर सकते हैं उदाहरण के लिए के बाद :

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