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

Ответ 1

Puaka Я меняю маленькую вещь, которая заставляет ее работать потрясающе. Он идеально выравнивает центр.

Измените colorbox.css

от

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

к

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

colorbox отлично выровнен.

Ответ 2

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

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

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

Ответ 3

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

из

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

к

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

Ответ 4

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

$(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'});
        }
    });
});

Ответ 5

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

i разработал другой метод.

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

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

Ответ 6

Это работает для меня еще лучше:

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

Ответ 7

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

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

к

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

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

Ответ 8

posTop = Math.max(document.documentElement.clientHeight - settings.h - loadedHeight - interfaceHeight,0)/2,
posLeft = Math.max($window.width()  - settings.w - loadedWidth - interfaceWidth,0)/2;

Ответ 9

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

$(document).ready(function(){

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

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

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

Ответ 10

Я считаю, что приведенные выше методы не подходят для 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
                 }
              });

Этот метод работает blendent