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

Question

Я работаю с jquery colorbox. Когда содержимое страницы большое и цветное окно открыто. Затем поле цвета прокручивается вместе с содержимым страницы. Я хочу, чтобы colorbox должен быть исправлен даже при прокрутке содержимого фона.

Пожалуйста, помогите мне решить эту проблему.

Answer 1

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

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

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

Answer 2

Пуака, я меняю маленькую вещь, которая делает его потрясающим. Выравнивает центр идеально.

Изменить 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 идеально выровнен.

Answer 3

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

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

Answer 4

попробуйте это. измените 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;}

Answer 5

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

Answer 6

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

$(document).ready(function(){

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

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

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

Answer 7

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

Answer 8

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

        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;

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

Answer 9

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

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

Answer 10

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

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

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

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