Modal window that takes over browser's scrollb

Question

I have a modal window that will display content longer that the browser's window height, so I need to create a modal window that takes over the brower's scrollbar like the one we see on Pinterest. Furthermore, clicking on the image will cause that image to translate to where it will be in the modal window.

Note how the opening the modal changes the scrollbars

Problem: How can I create the same modal window (takes over scrollbar) and animation of the image? I know that the URL in the browser address bar changes when the modal window appears, but you will notice that the page did not really change. I am able to do this using backbone.js so no worries.

HTML Code

<div id="showModal">Click me!</div>

<div class="modal">
    <div class="modal_item">
        <div class="modal_photo_container">
            <img src="img/posts/original/1019_bb8f985db872dc7a1a25fddeb3a6fc3c43981c80.jpg" class="modal_photo">
        </div>
    </div>
</div>

JS Code

$('#showModal').click(function() {
    $('.modal').show();
});

Answer 1

First, I'd suggest an html structure for your modal similar to this one:

    <div class="modal-container">
        <div class="modal">
        </div>
    </div>

Then, on 'click', you'd add overflow:hidden to body, and, somehow, add display:block to .modal-container. .modal-container would have the corresponding css:

.modal-container {
   display: none;
   overflow-y: scroll;
   position: fixed;
   top: 0; right: 0;
   height: 100%; width: 100%; 
}

Take a look at a working example at http://jsfiddle.net/joplomacedo/WzA4y/