Home/ Questions/Q 8716703
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T06:08:56+00:00

I have an html file <html> <body> <div #main> <a click to open lightbox>

  • 0

I have an html file

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

When the lightbox opens, This becomes 

 <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>

I want #main to be noscroll. I read about overflow:hidden, and position:static; etc. My css .noscroll{}.

The problem is, if I use overflow:hidden on #main for noscroll, body still scrolls. If I use position:static on #main, after pop up is closed, #body scrolls to top. The idea is to get pinterest like behaviour, and I am using prettyphoto.

Appreciate any hints. Somewhat related to Preventing div scrolling back to top when changing position to fixed but it does not talk about a light box being added. and thats where the problem is.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I need code for better answer, here some tip-off

    1. Have you tried to set your body on “overflow:hidden”?

    2. The scroll depend on which element you’re hovering, have you tried to set your #main size to the window size?

    Salutations

    [update]

    After i’ve seen your website here some change i think you should do.

    1. Make the “pp_pic_holder” child of the “pp_overlay”.
    2. place your “pp_pic_holder” in css, not fixed, use “margin: 0 auto;”

    3. In Jquery, use “resize” function on windows to set the width/height of your “pp_overlay” to the window one. It should look like this.

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


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

overlayResize();

    Here some jsFiddle is did:

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

    [update]
    And if you want to scroll in the overlay, don’t forget to add:

        overflow:auto;

    to your overlay.

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

    [Update]

    This one make the stop hiding function when you click in the selected pics.

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

    • 0