jQuery colorbox：如何更改颜色框的位置答案

【问题标题】：jQuery colorbox : How can I change the position of the colorboxjQuery colorbox：如何更改颜色框的位置
【发布时间】：2013-04-15 02:40:08
【问题描述】：

默认情况下，颜色框在屏幕上垂直和水平居中显示。有没有办法改变它，例如从顶部垂直和水平居中的 10%？

【问题讨论】：

标签： jquery position positioning colorbox

【解决方案1】：

这将覆盖顶部位置，您可以对左侧等执行相同操作：

#colorbox { top: 100px !important; }

从顶部开始 10% 会比较棘手，您必须在每次显示颜色框时在 onload 回调中实现自己的定位逻辑，或者扩展颜色框的代码，但没有快速的方法来做到这一点。

更新

Colorbox 现在有一个内置选项来执行此操作：

$("a").colorbox({ top: 100, left: "50%" })

更新 2

如果您不使用彩盒，我强烈建议您使用qTip2。
更好的位置处理（jQuery UI 风格），更清晰的 HTML 输出和更简单的 IE

【讨论】：

这似乎对我不起作用，它只是切断了盒子的底部。对别人有用吗？
@Josh 请在另一个问题中提供您的代码，以便进行故障排除。这种方法绝对有效。

【解决方案2】：

我不得不即时覆盖颜色框位置并找到以下解决方案：

在 jquery.colorbox.js 中，publicMethod.position 函数使用缓存版本的设置。要即时修改 settings.left/top，我们需要使用对象设置属性。为此，我们需要在函数中将 settings.top/left 替换为 this.settings.top/left (ln 499)：

 if(typeof this.settings!="undefined"){
    settings.left=this.settings.left;
    settings.top=this.settings.top;
 }
 if (settings.right !== false) {...

现在，我们可以改变物体的位置了：

$.colorbox.settings.left=newLeft;
$.colorbox.settings.top=newTop;
$.colorbox.position();

【讨论】：

【解决方案3】：

您可以在初始化彩盒时使用彩盒设置。例如，要将#colorbox 与您单击的高度相同，请使用此（.colorbox 是用户定义的颜色框类）：

$(".colorbox").each(function(i) {
    var offset = $(this).offset();
    $(this).colorbox({top:offset.top});
});

例如，您还可以设置一个最小顶部，并使#colorbox 高一点

$(".colorbox").each(function(i) {
    var offset = $(this).offset();
    var o = offset.top-200;
    if(o<100){o=100;}
    $(this).colorbox({top:o});
});

【讨论】：

【解决方案4】：

#cboxWrapper{
  position:fixed;
  top:100px;
  left:300px;
  z-index:9999;
  overflow:hidden;
}

在您的 JSP 或其他网页中应用此样式。

【讨论】：