jQuery colorbox: как я могу изменить положение colorbox

Question

По умолчанию цветное окно отображается по центру как вертикально, так и горизонтально на экране.Есть ли способ изменить это, например, на 10% от вершины по вертикали и по центру по горизонтали?

Answer 1

Это заменит верхнюю позицию, и вы можете сделать то же самое с левой и т. Д .:

#colorbox { top: 100px !important; }

10% сверху было бы хитрее, вам пришлось бы реализовывать свою собственную логику позиционирования в обратном вызове при загрузке каждый раз, когда отображается colorbox, или расширять код colorbox, но нет быстрого способа сделать это.

UPDATE

Colorbox теперь имеет встроенную опцию, чтобы сделать это:

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

ОБНОВЛЕНИЕ 2

Если вы не привязаны к colorbox, я настоятельно рекомендую использовать qTip2 .
Гораздо лучшая обработка позиции (стиль jQuery UI), более чистый вывод HTML и более простая поддержка IE <8. </p>

Answer 2

Мне пришлось на лету переопределить положение colorbox и нашел следующее решение:

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

Answer 3

Вы можете использовать настройку colorbox при инициализации colorbox. Например, чтобы #colorbox находился на той же высоте, где вы щелкнули, используйте это (.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 или других веб-страницах.