Colorbox не открывается на должном уровне при первом открытии

Поэтому я использую плагин colorbox для контактной формы. Я просто свойства colorbox по умолчанию, поэтому он должен автоматически настраиваться на div, который он содержит (правильно?).

Хорошо Существует небольшая вертикальная полоса прокрутки в этом содержимом цвета, когда загружается ее ПЕРВЫЙ. Я видел, как это случалось спорадически в Firefox и chrome для OSX

попытка # 1

$("a.modalAutosize").each(function(){
    $(this).colorbox();

});

активный код на примере

$("a.modalAutosize").each(function(){
    $(this).colorbox({onOpen: function(){$.fn.colorbox.resize()}});

});

Ответы

Ответ 1

Я исследовал проблему.

Попробуйте посмотреть, какой контент вы загружаете с помощью ajax. Если у него есть некоторые изображения без атрибутов "высота" и "ширина", могут появляться полосы прокрутки.

Это происходит потому, что браузер не знает о размере изображения и не ждет, пока он загрузится, чтобы вычислить макет страницы. После первой загрузки изображение находится в кеше, и браузер может вычислить размер.

Попробуйте указать размер для изображений. Для меня это работает.

Ответ 2

$("a.modalAutosize").each(function(){
   $(this).colorbox();  
});

Здесь вам не нужно писать функцию each(). Вы можете отключить прокрутку.

Eg.

$("a.modalAutosize").colorbox({scrolling: false});

Ответ 3

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

Ответ 4

Я не использовал изображения, поэтому принятый ответ не помог мне. Кроме того, это произошло только при использовании inline: true и показалось выключенным по высоте кнопки X в правом нижнем углу. Чтобы исправить это, я добавил новое свойство inlineHeightAdjustment, а затем использовал его в функции getHeight.

В jquery.colorbox.js:

function getHeight() {
   settings.h = settings.h || $loaded.height();
   settings.h = settings.mh && settings.mh < settings.h ? settings.mh : settings.h;
   // Adjust height for inline boxes
   settings.h = settings.inline ? settings.h + settings.inlineHeightAdjustment : settings.h;
   return settings.h;
}

Затем на моих страницах:

$(".inlineColorBox").colorbox({
   inline: true,
   inlineHeightAdjustment: 25,
});

Возможно, вы, возможно, сделаете это лучше, приняв строку, чтобы вы могли указать em, px,% и т.д., но я знал, что мне нужны пиксели, что означает предположение о числовом значении.