Ana pencerede jquery iletişim kutusunu görüntüleme

Question

Bir iframe kullanan bir web sitem var. Iframe, web sitesinin içeriğidir. Şimdi iframe'de jQuery Dialog'u kullanmak istiyorum. Ancak, bunu kullanırken, bindirme ve iletişim kutusu yalnızca üst öğede olmayan iframe içinde görüntülenir.

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

benim iframe ben diyaloğu oluşturmak için aşağıdaki javascript kullanıyorum ve bunu göstermek için: My ana html iletişim için tanımlanan aşağıdaki html vardır.

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

bunu kullanmaktan iletişim göstermek için: iletişim fonksiyonu iframe kapsamında çalışan olduğundan

dlg1.dialog('open'); 

Answer 1

, her zaman yarı saydam arka plan div gibi iletişim div'leri (yaratacak ve diyalog penceresi) iframe'in çocukları olarak. Öğeyi ana belgeden almanıza rağmen, gerçek komut iframe'de hala çalışıyor. Firefox ve Firebug'ınız varsa, neler olduğunu görmek için HTML denetçisini kullanabilmeniz gerekir.

sadece iki çözümleri düşünebilirsiniz:

1. jQuery iletişim kütüphanenin değiştirilmiş bir sürümünü kullanın. Bunu hiç önermiyorum
2. JavaScript'inizi, üst belge bağlamında çalışacak şekilde taşıyın.

Answer 2

basit ve zarif çözüm var:

1. Ebeveyninizin penceresine jquery ve jQueryUI Dahil sen Örneğin iframe

içinde ebeveyn JQuery nesnesine erişebilir Bundan sonra

:

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