Điều chỉnh chiều cao iframe của jQuery Fancybox theo nội dung thay đổi bên trong

Question

Tôi đang sử dụng jQuery Fancybox để hiển thị biểu mẫu trong cửa sổ phương thức. Tôi đang sử dụng mã sau:

$("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); 
    }); 
} 
}); 

Với chức năng onComplete bổ sung, tôi có thể điều chỉnh chiều cao của khung nội tuyến phù hợp với chiều cao của nội dung bên trong.

Tuy nhiên, tôi đã ẩn một vài thành phần với jQuery .hide() bên trong khung nội tuyến. Bất cứ khi nào tôi muốn .show() các yếu tố này, khung nội tuyến chính nó không thay đổi kích thước cùng với chiều cao thêm của các yếu tố có thể nhìn thấy bây giờ.

Tôi làm cách nào để thực hiện việc này? Cảm ơn!

Answer 1

Đặt chức năng sau đây để trang

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

Sau đó, kích hoạt chức năng này để chức năng showhide của bạn. Ví dụ;

function yourShowHideFn(){ 
    //bla bla bla 

    $.fn.ResizeFancy(); 
}