Ventana modal que asume la barra de desplazamiento del navegador como en Pinterest

Question

Tengo una ventana modal que mostrará contenido más largo que la altura de la ventana del navegador, así que necesito crear una ventana modal que tome la barra de desplazamiento del navegador como la que vemos en Pinterest . Además, al hacer clic en la imagen, la imagen se trasladará a donde estará en la ventana modal.

Nota cómo la apertura de la modal cambia las barras de desplazamiento

Problema: ¿Cómo se puede crear la misma ventana modal (se hace cargo de la barra de desplazamiento) y la animación de la imagen? Sé que la URL en la barra de direcciones del navegador cambia cuando aparece la ventana modal, pero notará que la página realmente no cambió. Puedo hacer esto usando backbone.js para que no te preocupes.

Código HTML

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

Código JS

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

Answer 1

En primer lugar, me gustaría sugerir una estructura html para su modal similares a ésta:

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

Luego, en 'clic', y Agregaría overflow:hidden a body y, de alguna manera, agregue display:block al .modal-container. .modal-container tendría el CSS correspondiente:

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

Tome un vistazo a un ejemplo de trabajo en http://jsfiddle.net/joplomacedo/WzA4y/