代码之家 › 专栏 › 技术社区 › Derek Adair

第一次打开时,色盒没有在适当的高度打开

colorbox jquery

Derek Adair · 技术社区 · 14 年前

所以我用的是 colorbox 联系人窗体的插件。我只是默认的colorbox属性,所以它应该自动调整到它包含的div(对吗?)。

嗯,有一个小的垂直滚动条在这个颜色框内容时,它第一次加载。我在伦敦见过零星发生的事 Firefox 和 chrome 对于 OSX

尝试#1

$("a.modalAutosize").each(function(){
    $(this).colorbox();

});

示例上的活动代码

$("a.modalAutosize").each(function(){
    $(this).colorbox({onOpen: function(){$.fn.colorbox.resize()}});

});

4 回复 | 直到 12 年前

sth 14 年前

我已经调查过这个问题了。

尝试查看您通过ajax加载的内容。如果它有一些没有“高度”和“宽度”属性的图像,滚动条就会出现。

之所以会发生这种情况,是因为浏览器不知道图像的大小,也不等到加载后才计算页面布局。第一次加载后,图像就在缓存中,浏览器可以计算大小。

尝试指定图像的大小。对我来说很管用。

sth 14 年前

$("a.modalAutosize").each(function(){
   $(this).colorbox();  
});

你不必写一篇文章 each() 在这里工作。您可以关闭滚动。

$("a.modalAutosize").colorbox({scrolling: false});

JDutil 13 年前

我也经历过这个问题,除了它发生在内容中没有任何图像。我可以通过将宽度和高度都设置为100%来解决这个问题,在一个div上包装我在colorbox中呈现的内容。

gregtheross 10 年前

我没有使用图像,所以接受的答案不适合我。而且,只有在使用inline:true时才会发生这种情况,并且在右下角X按钮的高度处显示为off。为了修复它,我添加了一个名为 inlineHeightAdjustment getHeight 功能。

在jquery.colorbox.js中:

function getHeight() {
   settings.h = settings.h || $loaded.height();
   settings.h = settings.mh && settings.mh < settings.h ? settings.mh : settings.h;
   // Adjust height for inline boxes
   settings.h = settings.inline ? settings.h + settings.inlineHeightAdjustment : settings.h;
   return settings.h;
}

然后在我的页面上:

$(".inlineColorBox").colorbox({
   inline: true,
   inlineHeightAdjustment: 25,
});

你也许可以通过接受一个字符串来做得更好,这样你就可以指定em,px,%等等,但是我知道我想要像素,这就是数值假设。