首次打开时，Colorbox无法以适当的高度打开

Question

所以我使用colorbox插件作为联系表单。我只是默认的颜色框属性，所以它应该自动调整到它包含的div（对吧？）。

当加载FIRST时，此彩盒内容上有一个小的垂直滚动条。我看到Firefox和chrome OSX偶尔会发生这种情况

尝试＃1

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

});

示例

上的活动代码

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

});

Answer 1

我已经调查了这个问题。

尝试查看由ajax加载的内容。如果它有一些没有“height”和“width”属性的图像，则可以显示滚动条。

这是因为浏览器不知道图像的大小，并且不会等到它加载以计算页面布局。第一次加载后，图像位于缓存中，浏览器可以计算大小。

尝试指定图像的大小。对我来说它有效。

Answer 2

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

您不必在此处编写each()功能。你可以关闭滚动。

例如

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

Answer 3

我也遇到过这个问题，除非内容中没有任何图像。通过将包含我在彩色框中呈现的内容的div设置为100％，我能够解决它。

Answer 4

我没有使用图片，所以接受的答案对我不起作用。此外，它只发生在使用内联：true时，并且在右下方的X按钮的高度处显示为关闭。为了解决这个问题，我添加了一个名为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，％等，但我知道我想要像素这样的数值假设。