根据IFrame内容动态调整JQuery模态对话框的大小

Dynamically resize JQuery modal Dialog to IFrame content

本文关键字：对话框 模态 JQuery 调整 IFrame 动态 根据      更新时间：2023-09-26

我有一个带有内部iFrame的JQuery对话框，它使用一个php文档来填充图像和一些信息。它工作正常，但如果我单击其中一个图像以转到完整大小的图像并将其显示在iFrame中，则对话框不会调整大小。

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

如果内容的大小发生变化（当单击图像并显示全分辨率图像时），我需要对话框和iFrame来更改它们的大小。

重要提示：加载完成后必须更新iframe的大小

    $(document).ready(function () {
        //do somthing like this
        window.parent.resizeIframe();
    });
相关文章：