I am using Colorbox to create my modals. Currently I have a modal that has a hidden div. When a Show more
button is clicked, the hidden div will fadeIn
and appear. However when the hidden div becomes visible, a scrollbar and part of this new div is not visible without scrolling down. In other words, the modal window did not resize to fit the new contents.
How can I make the modal window resize when the hidden div becomes visi开发者_JS百科ble? Thanks!
You can do this manually by targeting the modal and changing the height to the height of the inner DIV.
var height = $('#innerDiv').height();
$('#modal').css('height',height);
I too had similar problem, I tried following things: first step try upgrading ColorBox to latest version, I am using v1.3.17.1 In this js file add following customized resize function:
publicMethod.myResize = function (iW, iH) {
if (!open) { return; }
if (settings.scrolling) { return; }
var speed = settings.transition === "none" ? 0 : settings.speed;
$window.unbind('resize.' + prefix);
settings.w = iW;
settings.h = iH;
$loaded.css({ width: settings.w, height: settings.h});
publicMethod.position(speed);
};
and give call to this function, I am giving call to this function as:
parent.$.fn.colorbox.myResize(frameWidth, frameHeight);
where var frameWidth & frameHeight are resp. width & height of the modal to which I want to resize the colorbox modal. i.e. calculate the widht & height to which you want to resize the modal and pass these values to this customized resize function. Probably you should try calling this function after some time period (e.g. using settimeout()), this will help to calculate the width & height to set, hope this helps...!!!
精彩评论