Question

我正在使用一个名为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很新。有人有任何想法吗？

Answer 1

您可以使用：

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

这是在colorbox初始化后的代码中：

$.colorbox.resize();

Answer 2

我有类似的情况，我使用了setTimeout函数给colorbox加载一些时间，然后调用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);

这让我获得了我需要的功能。模态窗口始终调整为容器的内容

Answer 3

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

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

Answer 4

您可以绑定此类事件，然后调用resize：

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

寻找＆＃39;事件挂钩＆＃39;看看你可以绑定到的其他内容：http://www.jacklmoore.com/colorbox/

如何在Colorbox上自动高度？

4 个答案: