如何使灯箱滚动灯箱而不是页面

Question

当用户点击产品时,我使用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进行一些更改来完成.有谁知道如何通过显示的代码实现这一目标？谢谢!

Answer 1

将此添加到.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;