3

ユーザーが製品をクリックしたときに 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 にいくつかの変更を加えることで実行できることを読みました。示されているコードでこれを達成する方法を知っている人はいますか? ありがとう!

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

ライトボックスが開いているときにクラスを html に追加します。例えば:

.lightbox-active{overflow:hidden}

また、ライトボックスには次のスタイルが必要です。

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

ライトボックスを閉じると、html から lightbox-active クラスが削除されます。

于 2014-10-21T22:11:07.840 に答える
0

ビューポートよりもサイズを大きくしたい場合は、おそらくposition: fixedラインが原因です。に変更するとposition: absolute、うまくいくはずです。

固定と絶対の両方が要素をドキュメント フローから除外するため、要素の表示方法に実質的な変更はありませんが、fixedその特定の位置に固定し、決して移動しないように強制します。

于 2013-03-07T15:05:12.543 に答える