jQuery 如何在 Colorbox 上自动设置高度?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/12936970/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 12:08:06  来源:igfitidea点击:

How to make Height Auto on Colorbox?

jqueryheightcolorbox

提问by Ben

I'm using a jQuery plugin called ColorBox and basically it creates a jquery modal however the modal has a fixed size height of "500" and I want it to have a minimum height but also I have expending menus within the modal so I would like to to automatically expand. How do I do this?
The code I currently have is:

我正在使用一个名为 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
});

Iv tried deleting the Height from this and using CSS, but that didnt work. Iv tried putting what I know of jquery in this line, but nothing seems to work, however I am pretty new to jQuery. Anyone got any ideas?

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

回答by webdeveloper

You can use this:

你可以使用这个:

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

And this in your code after colorbox was initialized:

这在 colorbox 初始化后的代码中:

$.colorbox.resize(); 

回答by joshgk00

I had a similar situation and I used a the setTimeout function to give some time for the colorbox to load then called the resize method.

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

I called the colorbox

我打电话给colorbox

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);

That got me the functionality I needed. The modal window always resizes to the content of the container

这为我提供了所需的功能。模态窗口总是根据容器的内容调整大小

回答by NXT

Using the current version of ColorBox, you can specify the maximal sizes in percents:

使用当前版本的 ColorBox,您可以指定以百分比为单位的最大尺寸:

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

回答by sparkos72

You can bind an event like this then call resize:

您可以绑定这样的事件,然后调用调整大小:

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

look for 'event hooks' to see what else you can bind to here: http://www.Hymanlmoore.com/colorbox/

寻找“事件挂钩”以查看您还可以在此处绑定什么:http: //www.Hymanlmoore.com/colorbox/