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:Hiển thị hộp thoại jquery trong cửa sổ chính
<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');
Thực ra, bạn có thể có thể di chuyển các hộp thoại div từ khung nội tuyến sang tài liệu gốc sau khi chúng được tạo, nhưng nó sẽ thực sự xấu xí. Một cái gì đó như .. # ('. Ui-widget-overlay, ui-dialog'). AppendTo (window.parent.document.body); – CalebD
Bạn nói đúng. Dường như nó di chuyển "modalHolder" từ cha mẹ vào khung nội tuyến. Tôi sẽ chuyển js của tôi từ đứa trẻ sang cha mẹ. Tôi đã cố gắng tránh điều đó. Dù sao cũng cảm ơn! – vikasde
Tôi có thể di chuyển các phần tử đến phụ huynh, tuy nhiên chiều cao/chiều rộng của chúng sẽ cần được tính toán lại. – vikasde