Question

我使用jquery colorbox。当页面内容很大并且打开colorbox时。然后颜色框与页面内容一起滚动。我希望即使背景内容滚动也需要修复颜色框。

请帮我解决这个问题。

Answer 1

也许所有这些答案都来自早期版本的colorbox，但“固定”参数现在从版本1.3.17开始提供：

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

不再需要CSS了！谢谢colorbox家伙！

Answer 2

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完全对齐。

Answer 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;}

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

Answer 5

只有当我一直滚动到顶部时，才能使用puaka方法。否则盒子会显得较低。

我设计了另一种方法。

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

onOpen删除正文的滚动条 onClosed替换滚动条

Answer 6

这个对我来说效果更好：

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

Answer 7

基于bradaric的想法，你可能需要改变

        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 8

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

Answer 9

上面的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'})
});

Answer 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

Colorbox在滚动时使灯箱固定

10 个答案: