Good afternoon, a simple question, using the example of VKONTAKTE, clicking on a photo in your friend’s album: how to implement the same scheme: page three scrolls down, but when you click on a photo, a translucent overlay is put, a full-size photo is placed on it, the site does not scroll up and down, and scrolls only black and transparent overlay with photo. position fixed for an overlay whose height is somewhat larger than the full-size picture? or how? how I create a translucent overlay, I perfectly imagine the question - how to implement the structure, that scrolling is only on the photo and its epigastric black overlay, and the page itself does not scroll?

  • yeah, thanks guys) jquery - this is unsporting in this case)) - Ilya Bazhinov

2 answers 2

div {overflow: scroll}

As an option overflow-x or overflow-y , depending on your needs.

    This is the answer to the question about the overlay ...

    For example:

     <style type="text/css"> html, body, .wrapper { padding:0; margin:0; height:100%; } .wrapper { overflow: auto; } .myOverlay { left:0; top:0; position: absolute; background:lightgray; z-index: 1000; width: 100%; height:100%; opacity:0.5; filter:alpha(opacity=50); } </style> //======================= <div class="wrapper">много текста</div>

    You can use ready-made solutions like jquery ui

    • overflow:auto will work only if the content exceeds the size of the diva - co11ter
    • It is better to prescribe everything manually than to connect the whole lib. - ReklatsMasters