调整 jQuery Fancybox' iframe高度根据里面内容的变化动态变化

Question

我正在使用 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 本身不会随着现在可见元素的额外高度而调整大小。

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

Answer 1

将下面的函数放到页面

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

后，触发这个函数到你的showHide函数中。例如;

function yourShowHideFn(){
    //bla bla bla

    $.fn.ResizeFancy();
}