根據里面更改的內容動態調整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();
}