Question

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

Answer 1

这将覆盖顶部位置，您也可以使用左侧等：

#colorbox { top: 100px !important; }

10％来自top会比较棘手，你必须在每次显示colorbox时在onload回调中实现自己的定位逻辑，或者扩展colorbox的代码，但没有快速的方法来做到这一点。

<强>更新

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

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

更新2

如果您没有使用彩盒，我强烈建议您使用qTip2 更好的位置处理（jQuery UI样式），更清晰的HTML输出和更简单的IE＆lt; 8支持。

Answer 2

我不得不动态覆盖colorbox位置并找到以下解决方案：

在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) {...

现在，我们可以改变对象位置：

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

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

Answer 4

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

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

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

4 个答案: