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

Javascript 调整jQuery Fancybox';iframe高度根据内部更改的内容动态调整,javascript,jquery,iframe,height,fancybox,Javascript,Jquery,Iframe,Height,Fancybox,我使用jQuery Fancybox在模式窗口中显示表单。我正在使用以下代码: $("a.iframe").fancybox({ 'padding': 0, 'width': 650, 'showCloseButton': false, 'hideOnContentClick': false, 'transitionIn': 'elastic', 'transitionOut': 'elastic', 'onComplete': function () { $('#fancybox-fram

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


我怎样才能做到这一点?谢谢

将以下函数放到页面上

$.fn.ResizeFancy = function(){
   $('#fancybox-content').height($('#fancybox-frame').contents().find('body').height() + 20);
};
之后,将此函数触发到showHide函数。比如,

function yourShowHideFn(){
    //bla bla bla

    $.fn.ResizeFancy();
}

我认为这一趋势符合你的要求: