ユーザーが製品をクリックしたときに lightbox_me jquery プラグインを使用してライトボックスを開きます。多くの場合、ライトボックスのコンテンツはフォールドの下に伸び、下にスクロールすると右のスクロールバーがページ全体を移動します.
ピンタレストのライトボックスのように、右のスクロールバーがライトボックスのみをスクロールし、残りのページは固定されたままになるようにしたいと思います。これに関するいくつかの投稿を見てきましたが、何もうまくいかないようです。
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 にいくつかの変更を加えることで実行できることを読みました。示されているコードでこれを達成する方法を知っている人はいますか? ありがとう!