根据内部更改的内容动态调整 jQuery Fancybox 的 iframe 高度

Posted 2023-03-05

【中文标题】根据内部更改的内容动态调整 jQuery Fancybox 的 iframe 高度

【英文标题】：Adjust jQuery Fancybox' iframe height dynamically according to changed contents inside

【发布时间】：2011-11-17 20:08:08

【问题描述】：

我正在使用 jQuery Fancybox 在模式窗口中显示表单。我正在使用以下代码：

$("a.iframe").fancybox(
'padding': 0,
'width': 650,
'showCloseButton': false,
'hideOnContentClick': false,
'transitionIn': 'elastic',
'transitionOut': 'elastic',
'onComplete': function () 
  $('#fancybox-frame').load(function () 
    $('#fancybox-content').height($(this).contents().find('body').height() + 20);
  );

);

通过附加的 onComplete 函数，我可以根据内部内容的高度调整 iframe 的高度。

但是，我在 iframe 中使用 jQuery 的 .hide() 隐藏了一些元素。每当我想 .show() 这些元素时，iframe 本身不会随着现在可见元素的额外高度一起调整大小。

我怎样才能做到这一点？谢谢！

【问题讨论】：

我认为这种趋势可以满足您的要求：Problem Adjusting Fancybox Iframe Overlay Width and Height

【参考方案1】：

将以下函数放到页面中

$.fn.ResizeFancy = function()
   $('#fancybox-content').height($('#fancybox-frame').contents().find('body').height() + 20);
;

之后，将这个函数触发到你的 showHide 函数。例如；

function yourShowHideFn()
    //bla bla bla

    $.fn.ResizeFancy();