title: Modal window that takes over browser's scrollbar like on Pinterest
body: <p>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.</p>
  
  <p><strong>Note how the opening the modal changes the scrollbars</strong></p>
  
  <p><img src="https://i.stack.imgur.com/wIHK9.jpg" alt="enter image description here"></p>
  
  <p><strong>Problem:</strong> 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.</p>
  
  <p><strong>HTML Code</strong></p>
  
  <pre><code>&lt;div id="showModal"&gt;Click me!&lt;/div&gt;
  
  &lt;div class="modal"&gt;
      &lt;div class="modal_item"&gt;
          &lt;div class="modal_photo_container"&gt;
              &lt;img src="img/posts/original/1019_bb8f985db872dc7a1a25fddeb3a6fc3c43981c80.jpg" class="modal_photo"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS Code</strong></p>
  
  <pre><code>$('#showModal').click(function() {
      $('.modal').show();
  });
  </code></pre>