3

当用户单击产品时，我正在使用 lightbox_me jquery 插件打开灯箱。通常，灯箱内容会延伸到首屏下方，而当您向下滚动时，右侧滚动条会移动整个页面。

我希望它像 pinterest 灯箱一样工作，右滚动条只滚动灯箱，页面的其余部分保持固定。我已经看过一些关于此的帖子，但似乎没有什么对我有用。

jQuery(function(){


$('.productBoxLink').click(function(e) {
    var box = $(this).siblings(".productLightboxContent").html();
    $('.lightBox').lightbox_me({
        centered: false,
        modalCSS:  {top: '50px'},
        onLoad: function() { 
              $('.productLightbox').html(box);
              $('.productUpdateInner').show();
            },
        onClose: function() {
              $('.productUpdateInner').hide();
            }
        });
    return false;
  });
});


.lightBox {
width: 450px;
background-color: #fff;
top: 400px;
position: fixed;
padding: 30px;
text-align: center;
display: none;
clear: both;
-moz-box-shadow: 0 0 5px #5C5C5C;
-webkit-box-shadow: 0 0 5px #5C5C5C;
box-shadow: 0 0 5px #5C5C5C;
border-radius: 5px;
}

我读过这可以通过对我的 CSS 进行一些更改来完成。有谁知道我如何使用显示的代码实现这一目标？谢谢！

4

4 回答 4

6

将此添加到 .lightBox：

height:600px; /* You need to set a specific height - px or %*/
overflow-x:scroll; /* Tell the container to scroll if the content goes beyond bounds*/

更新

width:100%;
overflow-x:scroll;
于 2013-03-07T15:02:56.630 回答
0

如果你想让它的大小大于视口，很可能是因为你的position: fixed线。将其更改为position: absolute，您应该会很好。

固定和绝对都将元素从文档流中取出，因此它的呈现方式应该没有净变化，而是fixed将其固定到该特定位置并强制它永远不动。

于 2013-03-07T15:05:12.543 回答
0

我想一般的答案是制作灯箱的背景（即灯箱之前的内容；主要内容包装器）position: fixed;并用javascript将其顶部值调整为与灯箱打开时用户滚动位置相对应的负值. 除此之外，灯箱需要position: absolute;与固定的顶部/左侧值相同。

当用户关闭灯箱时，需要恢复以前的值。

于 2013-11-05T14:41:13.957 回答
0

打开灯箱时向 html 添加一个类。例如：

.lightbox-active{overflow:hidden}

此外，您的灯箱应该具有下一个样式：

.lightbox{overflow-x:hidden;overflow-y:scroll}

当您关闭灯箱时，您已经从 html 中删除了 lightbox-active 类。

于 2014-10-21T22:11:07.840 回答