Finestra modale che occupa la barra di scorrimento del browser come su Pinterest

Question

Ho una finestra modale che visualizzerà il contenuto più a lungo dell'altezza della finestra del browser, quindi ho bisogno di creare una finestra modale che riprenda la barra di scorrimento del brower come quella che vediamo su Pinterest . Inoltre, facendo clic sull'immagine, l'immagine verrà convertita nel punto in cui si troverà nella finestra modale.

Si noti come il aprendo il modale cambia le barre di scorrimento

Problema: Come posso creare lo stesso finestra modale (prende il sopravvento barra di scorrimento) e l'animazione dell'immagine? So che l'URL nella barra degli indirizzi del browser cambia quando viene visualizzata la finestra modale, ma noterai che la pagina non è stata modificata. Sono in grado di farlo utilizzando backbone.js quindi non preoccuparti.

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

codice JS

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

Answer 1

In primo luogo, suggerirei una struttura html per il tuo modale simile a questo:

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

Quindi, su "clic", y aggiungere overflow:hidden a body e, in qualche modo, aggiungere display:block a .modal-container. .modal-container avrebbe il css corrispondente:

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

Date un'occhiata a un esempio di lavoro a http://jsfiddle.net/joplomacedo/WzA4y/