如何在 Colorbox 上自动设置高度？答案

【问题标题】：How to make Height Auto on Colorbox?如何在 Colorbox 上自动设置高度？
【发布时间】：2012-10-07 20:49:15
【问题描述】：

我正在使用一个名为 ColorBox 的 jQuery 插件，它基本上创建了一个 jquery 模态，但是模态的固定大小高度为“500”，我希望它有一个最小高度，但我在模态中也有扩展菜单所以我想自动扩展。我该怎么做呢？
我目前拥有的代码是：

$(".colorboxlink1").colorbox({
  opacity:"0.2",
  width:"450",
  height:"500",
  title:"To close this dialog click X icon at the right", 
  iframe:true
});

我尝试从中删除高度并使用 CSS，但没有奏效。我尝试将我对 jquery 的了解放在这一行中，但似乎没有任何效果，但是我对 jQuery 还是很陌生。有人有什么想法吗？

【问题讨论】：

标签： jquery height colorbox

【解决方案1】：

你可以用这个：

$('.colorboxlink1').colorbox({ 
    onComplete : function() { 
       $(this).colorbox.resize(); 
    }    
});

在初始化颜色框后，您的代码中会出现这样的情况：

$.colorbox.resize();

【讨论】：

这试图工作，但它似乎只显示了模式窗口的一半。我会继续玩，看看我能编辑什么。
也试过了，我的颜色框调整为 0px 高度

【解决方案2】：

我遇到了类似的情况，我使用 setTimeout 函数给颜色框一些时间来加载，然后调用 resize 方法。

我调用了颜色框

var profileHeight=jQuery('#profile').height(); //Get the height of the container     
    setTimeout(function (){
       jQuery.colorbox({
           html:jQuery('#profile').html(),
           width:'50%',
           height:profileHeight, 
           opacity:0.5})}
        , 600);
//Wait 700ms then resize
setTimeout(function(){jQuery(this).colorbox.resize();},700);

这让我得到了我需要的功能。模态窗口总是根据容器的内容调整大小

【讨论】：

【解决方案3】：

使用当前版本的 ColorBox，您可以以百分比指定最大尺寸：

$(".colorboxlink1").colorbox({
    maxWidth: '95%',
    maxHeight: '95%'
});

【讨论】：

【解决方案4】：

你可以像这样绑定一个事件然后调用resize：

$(document).bind('cbox_complete', function() {
    $.colorbox.resize(); 
});

查找“事件挂钩”以查看您可以在此处绑定的其他内容：http://www.jacklmoore.com/colorbox/

【讨论】：