Browser'ın kaydırma çubuğunu üstünden alan modal penceresi Pinterest

Question

Tarayıcımın pencere yüksekliğinden daha uzun süre içeriğe sahip olacak bir modal pencereye sahibim, bu yüzden tarayıcının kaydırma çubuğunu Pinterest'te gördüğümüz gibi ele alan kalıcı bir pencere oluşturmam gerekiyor. . Ayrıca, resmin üzerine tıklamak, bu görüntünün modal pencerede nerede olacağına dair çevirmesine neden olur. Görüntünün nasıl aynı modal pencere oluşturabilirsiniz (kaydırma devralır) ve animasyon açılış modal kaydırma çubukları Sorun

nasıl değiştiğini

Not? Modal pencere belirdiğinde tarayıcı adres çubuğundaki URL'nin değiştiğini biliyorum, ancak sayfanın gerçekten değişmediğini fark edeceksiniz. Bunu endişe etmeyecek şekilde backbone.js kullanarak yapabilirim.

HTML Kod

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

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

Answer 1

Önce bu sitelerinden birine kalıcı benzer için bir html yapısını öneririm:

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

Sonra, 'tıkla' y overflow:hidden'u body'a ekleyin ve bir şekilde display:block'u .modal-container'a ekleyin.

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

http://jsfiddle.net/joplomacedo/WzA4y/

bir çalışma örneğe göz atın: .modal-container tekabül css olurdu