[英]Adjust jQuery Fancybox' iframe height dynamically according to changed contents inside
I'm using jQuery Fancybox to display forms in a modal window. 我正在使用jQuery Fancybox在模态窗口中显示表单。 I'm using the following code: 我正在使用以下代码:
$("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);
});
}
});
With the additional onComplete function, I'm able to adjust the height of the iframe accordingly to the height of the contents inside. 使用额外的onComplete函数,我可以根据内部内容的高度调整iframe的高度。
However, I've hidden a few elements with jQuery's .hide() inside the iframe. 但是,我在iframe中隐藏了一些jQuery的.hide()元素。 Whenever I want to .show() these elements, the iframe itself doesn't resize along with the extra height of the now visible elements. 每当我想要.show()这些元素时,iframe本身不会随着现在可见元素的额外高度而调整大小。
How can I accomplish this? 我怎么能做到这一点? Thanks! 谢谢!
Put the following function to the page 将以下功能放到页面上
$.fn.ResizeFancy = function(){
$('#fancybox-content').height($('#fancybox-frame').contents().find('body').height() + 20);
};
After, trigger this function to your showHide function. 之后,触发此功能到您的showHide功能。 For example; 例如;
function yourShowHideFn(){
//bla bla bla
$.fn.ResizeFancy();
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.