0

私はhtmlファイルを持っています

<html>
<body>
<div #main> <a click to open lightbox> <img> <more images> </a> </div>
</body>
</html>

ライトボックスを開くと、こうなります

 <html>
    <body>
    <div id="main"> <a click to open lightbox> <img> <more images> </a> </div>
    <div id="pic_holder">...Popup div content </div>
    <div id="overlay"></div>
    </body>
    </html>

#main を noscroll にしたい。overflow:hidden と position:static; について読みました。など。私のcss .noscroll{}。

問題は、noscroll の #main で overflow:hidden を使用すると、本文がまだスクロールすることです。#main で position:static を使用すると、ポップアップが閉じられた後、#body が一番上にスクロールします。アイデアは、ピンタレストのような動作を取得することであり、私はかなりの写真を使用しています。

ヒントをいただければ幸いです。位置を固定に変更するときにdivが上にスクロールしないようにすることに多少関連していますが、ライトボックスが追加されていることについては触れていません。そして、そこが問題です。

4

1 に答える 1

0

より良い答えを得るにはコードが必要です。ここにいくつかのヒントがあります

  1. 「overflow:hidden」に体を設定しようとしましたか?

  2. スクロールは、ホバリングしている要素によって異なります。#main サイズをウィンドウ サイズに設定しようとしましたか?

挨拶

[アップデート]

ここであなたのウェブサイトを見た後、いくつかの変更を行う必要があると思います。

  1. 「pp_pic_holder」を「pp_overlay」の子にします。
  2. 「pp_pic_holder」を css に配置します。固定ではなく、「margin: 0 auto;」を使用してください。

  3. Jqueryでは、ウィンドウで「サイズ変更」機能を使用して、「pp_overlay」の幅/高さをウィンドウのものに設定します。このように見えるはずです。

    function overlayResize(){
   var WW=$(window).width();
   var WH=$(window).height();
   $(".overlay").height(WH).width(WW);
}


$(window).resize(function(){
    overlayResize();
})

overlayResize();

ここでいくつかの jsFiddle が実行されます:

http://jsfiddle.net/kirkas/PSjTD/

[更新] オーバーレイでスクロールしたい場合は、忘れずに追加してください:

    overflow:auto;

あなたのオーバーレイに。

http://jsfiddle.net/kirkas/PSjTD/

[アップデート]

これは、選択した写真をクリックすると非表示機能を停止します。

http://jsfiddle.net/kirkas/PSjTD/

于 2012-10-21T18:06:34.020 に答える