Hiển thị hộp thoại jquery trong cửa sổ chính

Question

Tôi có trang web sử dụng khung nội tuyến. Khung nội tuyến chính là nội dung của trang web. Bây giờ trong khung nội tuyến tôi muốn sử dụng Hộp thoại jQuery. Tuy nhiên, khi sử dụng, lớp phủ và hộp thoại chỉ được hiển thị bên trong khung nội tuyến chứ không hiển thị trên trang gốc. HTML mẹ của tôi có html sau được xác định cho hộp thoại:

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

Trong iframe của tôi, tôi đang sử dụng javascript sau để tạo hộp thoại và hiển thị hộp thoại.

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

Để hiển thị hộp thoại tôi sử dụng này:

dlg1.dialog('open'); 

Answer 1

Bởi vì chức năng thoại đang chạy trong bối cảnh của các iframe, nó sẽ luôn luôn tạo ra các divs thoại (như div nền bán minh bạch và div hộp thoại) dưới dạng con của iframe. Mặc dù bạn đang lấy phần tử từ tài liệu gốc, nhưng tập lệnh thực tế vẫn đang chạy trong khung nội tuyến. Nếu bạn có Firefox và Firebug, bạn sẽ có thể sử dụng trình kiểm tra HTML để xem điều gì đang xảy ra.

tôi chỉ có thể nghĩ đến hai giải pháp:

1. Sử dụng một phiên bản sửa đổi của thư viện thoại jQuery. Tôi không khuyên bạn nên làm điều này ở tất cả các số
2. Di chuyển JavaScript của bạn để nó thực thi trong ngữ cảnh của tài liệu gốc.

Answer 2

Có rất đơn giản và giải pháp duyên dáng:

1. Bao gồm jquery và jQueryUI vào cửa sổ cha mẹ của bạn
2. Sau này bạn có thể truy cập vào các cha mẹ đối tượng JQuery trong iframe

Ví dụ :

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