Colorbox 使灯箱在滚动时固定答案

【问题标题】：Colorbox make the light box fixed when scrollingColorbox 使灯箱在滚动时固定
【发布时间】：2010-04-26 08:34:10
【问题描述】：

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

请帮我解决这个问题。

【问题讨论】：

标签： jquery jquery-plugins colorbox

【解决方案1】：

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

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

不再需要在 CSS 中胡闹！谢谢彩盒伙计们！

【讨论】：

如果你修复它 - 如果你有一个非常高的图像并且你不想缩小它，你不能向下滚动来查看整个图像
@Picard fixed 最好与 maxHeight 和 maxWidth 结合使用。将这些设置为 90% 或类似的值，它会缩小对于用户屏幕而言太大的图像。

【解决方案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 完全对齐。

【讨论】：

【解决方案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 方法只有在我一直滚动到顶部时才有效。否则框会出现在下方。

我设计了另一种方法。

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

onOpen 移除 body 的滚动条 onClosed 替换滚动条

【讨论】：

这是最好的方法，当在 Chrome 中使用时，onClose 会创建一个新的滚动条。 on Closed 的属性应该是“可见”，而不是“自动”；

【解决方案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】：

上面的 css 修复对 Mozilla 和 Chrome 非常有效，但在 IE 中，如果事件发生在页面之间，它会产生一些填充问题。 U 可以使用钩子扩展功能并在打开颜色框时隐藏溢出。示例：

$(document).ready(function(){

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

上面的代码在正文中添加了样式溢出：隐藏，如果你关闭颜色框，你可能会发现页面上没有滚动，所以你应该在 $(document).ready(函数（）。

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

【讨论】：

此代码仅在元素打开尚未导致用户滚动时才有效

【解决方案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
                 }
              });

此方法适用于混合

【讨论】：

【解决方案10】：

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

【讨论】：