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
How to make Height Auto on Colorbox?
提问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/