Colorbox在滚动时使灯箱固定

我使用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; 

在位置function。 （适合我）

Answer 8

上面的css修复对于Mozilla和Chrome来说非常好，但是在IE中，如果事件发生在页面之间，它会产生一些填充问题。 U可以使用挂钩扩展function，并在打开彩色盒时隐藏溢出。 示例：

 $(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 9

我相信上面的方法不适合滚动时固定的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 } }); 

这种方法很有效

Answer 10

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