【问题标题】: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/

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 2014-06-09
          • 2021-11-02
          • 2019-03-05
          • 1970-01-01
          • 2021-02-19
          • 1970-01-01
          • 2019-03-11
          相关资源
          最近更新 更多