Colorbox фиксирует световой короб при прокрутке

возможно, все эти ответы взяты из более ранней версии colorbox, но параметр «fixed» теперь доступен с версии 1.3.17:

$("a.item").colorbox({fixed:true});

больше не нужно возиться с CSS! Спасибо, ребята, Colorbox!

Пуака, я меняю небольшую вещь, благодаря чему она отлично работает. Он идеально выравнивает центр.

Измените colorbox.css

из

#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}

to

#colorbox, #cboxOverlay{position:fixed; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxWrapper{}

colorbox идеально выровнен.

попробуй это. измените colorbox.css на первое правило css:

из

#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}

to

#colorbox, #cboxOverlay {position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxWrapper { position:fixed; margin:0 auto; z-index:9999; overflow:hidden;}

Надеюсь, это тоже будет полезно.

$(document).ready(function() {

    $('.div-container').colorbox( {

        initialWidth:'550px', 
        initialHeight:'350px', 
        onComplete: function() {
            // alert('window = ' + $(window).height());
            // alert('colorbox = ' + $('#colorbox').height());

            var window_height = $(window).height();
            var colorbox_height = $('#colorbox').height();
            var top_position = 0;

            if(window_height > colorbox_height) {
                top_position = (window_height - colorbox_height) / 2;
            }

            // alert(top_position);
            $('#colorbox').css({'top':top_position, 'position':'fixed'});
        }
    });
});

Метод пуака работал, только если я был прокручен до самого верха. иначе поле появится ниже.

я придумал другой метод.

$("#btn").colorbox({width:"90%", height:"90%", iframe:true, scrolling:false, onOpen:function() { $("body").css("overflow", "hidden"); }, onClosed:function() { $("body").css("overflow", "auto"); }});

onOpen удалить полосу прокрутки тела onClosed заменить полосу прокрутки

Для меня это работает даже лучше:

#colorbox, #cboxOverlay{position:fixed; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxWrapper{position:fixed;}

основываясь на брадарической идее, вам может потребоваться изменить

        posTop = Math.max(winHeight - settings.h - loadedHeight - interfaceHeight,0)/2 + $window.scrollTop(),
        posLeft = Math.max(document.documentElement.clientWidth - settings.w - loadedWidth - interfaceWidth,0)/2 + $window.scrollLeft();

to

        posTop = Math.max(winHeight - settings.h - loadedHeight - interfaceHeight,0)/2,
        posLeft = Math.max(document.documentElement.clientWidth - settings.w - loadedWidth - interfaceWidth,0)/2;

в функции позиции. (Работает для меня)

Приведенное выше исправление css отлично работает для Mozilla и Chrome, но в IE возникает некоторая проблема с заполнением, если событие происходит между страницей. U может расширить функцию с помощью хуков и скрыть переполнение при открытии палитры цветов. Пример :

$(document).ready(function(){

            $(document).bind('cbox_open', function(){
        $('body').css({overflow:'hidden'})
});
    });

приведенный выше код добавляет переполнение стиля: скрыто в теле, если вы закроете цветовую панель, вы можете обнаружить, что прокрутки нет на странице, поэтому для этого вам также следует добавить эту строку в $ (document) .ready (function () .

$(document).bind('cbox_closed', function(){
        $('body').css({overflow:'visible'})
});

Я считаю, что приведенные выше методы не подходят для исправления Colorbox при прокрутке. Следующий метод, который я тестировал во всех браузерах (IE7 и выше):

#colorbox, #cboxOverlay {
  position:absolute; top:0; left:0; z-index:9999;  
  }
#cboxWrapper {                       
  position:fixed; top:50%; left:50%; 
  margin:-25% 0 0 -25%; /*margin default */
  z-index:9999;
  }                                                 

/* not overflow hidden share, Opera truncates everything else */

              $("a.cBox").colorbox({
                 width:"500",
                 height:"400",
                 iframe:true,
                 onOpen: function() {
                 $('#cboxWrapper').css('margin','-200px 0 0 -250px');  
                 // margin adjusted - half the width and height minus margin top/left
                 }
              });

Этот метод работает смешанно