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

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

那么当它加载FIRST时，这个彩盒内容上有一个小的垂直滚动条。 我已经看到它偶尔会出现在Firefox和chrome for OSX

尝试＃1

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

例子上的活动代码

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

Answer 1

我调查了这个问题。

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

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

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

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，％等，但我知道我想要像素数值假设。