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。我读到了溢出：隐藏和位置：静态；等我的 css .noscroll{}。

问题是，如果我在#main 上为 noscroll 使用 overflow:hidden，body 仍然会滚动。如果我在#main 上使用 position:static，在弹出窗口关闭后，#body 会滚动到顶部。这个想法是为了获得类似 pinterest 的行为，我正在使用 prettyphoto。

感谢任何提示。与将位置更改为固定时防止 div 滚动回顶部有些相关，但它没有谈论添加灯箱。这就是问题所在。

4

1 回答 1

0

我需要代码以获得更好的答案，这里有一些提示

  1. 您是否尝试将您的身体设置为“溢出：隐藏”？

  2. 滚动取决于您悬停的元素，您是否尝试将#main 大小设置为窗口大小？

称呼

[更新]

在我在这里看到你的网站后，我认为你应该做一些改变。

  1. 制作“pp_overlay”的“pp_pic_holder”子级。
  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 回答