[英]Dynamically resize JQuery modal Dialog to IFrame content
I've got a JQuery dialog with an internal iFrame, which uses a php document to be filled with an image and some info. 我有一个带有内部iFrame的JQuery对话框,该对话框使用php文档填充图像和一些信息。 It works correctly, but if I click one of the images to go to the complete size image and show it in the iFrame, the dialog doesn't resize. 它可以正常工作,但是如果我单击其中一张图像以转到完整大小的图像并将其显示在iFrame中,则对话框不会调整大小。
This is how the iframe and dialog get created, I've erased some extra code, but here it's the important thingy: 这就是创建iframe和对话框的方式,我已经删除了一些额外的代码,但这很重要:
$('<iframe id="frameProductos" width="100%" src="articulos_info.php?codigo_art='+val+'" name="frameProductos">').appendTo('body');
var dialog = $("#frameProductos");
dialog.dialog({
title: 'Revisión de producto',
resizable: false,
modal: true,
position: ['center',150],
overlay: {
opacity: 0.5,
background: "black"
},
open: function( event, ui ) {
$('#frameProductos').width('100%');
},
close: function( event, ui ) {
$(this).dialog('destroy').remove();
},
width: 500,
height: 500,
buttons: {
"Cerrar": function () {
$(this).dialog('destroy').remove();
}
}
});
I need the dialog and iFrame to change their sizes if the content's size changes (when the image gets clicked, and the full resolution image appears). 如果内容的大小更改(单击图像并显示全分辨率图像时),我需要对话框和iFrame更改其大小。
Important Tip: you must update size of iframe after load completed 重要提示:加载完成后,您必须更新iframe的大小
$(document).ready(function () {
//do somthing like this
window.parent.resizeIframe();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.