jQuery 颜色框：如何更改颜色框的位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3353577/
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
jQuery colorbox : How can I change the position of the colorbox
提问by mike23
By default the colorbox appears centered both vertically and horizontally on the screen. Is there a way to change that, for example to 10% from top vertically and centered horizontally?
默认情况下，颜色框在屏幕上垂直和水平居中显示。有没有办法改变它，例如从垂直顶部到水平居中的 10%？
回答by Razor
This will override the top position, and you can do the same with left etc:
这将覆盖顶部位置，您可以对左等执行相同的操作：
#colorbox { top: 100px !important; }
10% from top would be trickier, you'd have to implement your own positioning logic in an onload callback everytime the colorbox is shown, or extend colorbox's code, but no quick way to do that.
从顶部开始 10% 会更棘手，每次显示颜色框时，您都必须在 onload 回调中实现自己的定位逻辑，或者扩展颜色框的代码，但没有快速的方法来做到这一点。
UPDATE
更新
Colorbox now has a built-in option to do this:
Colorbox 现在有一个内置选项来执行此操作：
$("a").colorbox({ top: 100, left: "50%" })
UPDATE 2
更新 2
If you're not bound to colorbox, I highly recommend using qTip2.
Far better position handling (jQuery UI style), cleaner HTML output and easier IE<8 support.
如果您不受 colorbox 的约束，我强烈建议您使用qTip2。
更好的位置处理（jQuery UI 风格）、更清晰的 HTML 输出和更容易的 IE<8 支持。
回答by Tanguy
I had to override colorbox position on the fly and found the following solution :
我不得不即时覆盖颜色框位置并找到以下解决方案：
In jquery.colorbox.js, the publicMethod.position function use a cached version of settings. To modify settings.left/top on the fly, we need to use the object settings property. To achieve this, we need to replace settings.top/left by this.settings.top/left within the function (ln 499):
在 jquery.colorbox.js 中，publicMethod.position 函数使用缓存版本的设置。要动态修改 settings.left/top，我们需要使用对象设置属性。为此，我们需要在函数 (ln 499) 中用 this.settings.top/left 替换 settings.top/left：
if(typeof this.settings!="undefined"){
settings.left=this.settings.left;
settings.top=this.settings.top;
}
if (settings.right !== false) {...
Now, we can change object position :
现在，我们可以更改对象位置：
$.colorbox.settings.left=newLeft;
$.colorbox.settings.top=newTop;
$.colorbox.position();
回答by Riccardo Caroli
You can use a colorbox setting when you initialize the colorbox. For example, to have the #colorboxat the same height of where you clicked, use this (.colorbox is the user defined colorbox class):
您可以在初始化颜色框时使用颜色框设置。例如，要#colorbox在您单击的位置具有相同的高度，请使用此（.colorbox 是用户定义的颜色框类）：
$(".colorbox").each(function(i) {
var offset = $(this).offset();
$(this).colorbox({top:offset.top});
});
You can also for example set a minimum top and make the #colorbox a little higher
例如，您还可以设置最小顶部并使 #colorbox 高一点
$(".colorbox").each(function(i) {
var offset = $(this).offset();
var o = offset.top-200;
if(o<100){o=100;}
$(this).colorbox({top:o});
});
回答by Vijay128
#cboxWrapper{
position:fixed;
top:100px;
left:300px;
z-index:9999;
overflow:hidden;
}
Apply this style in your JSP or other web pages.
在您的 JSP 或其他网页中应用此样式。
