Cửa sổ phương thức chiếm thanh cuộn của trình duyệt như trên Pinterest

Question

Tôi có cửa sổ phương thức hiển thị nội dung dài hơn chiều cao cửa sổ của trình duyệt, vì vậy tôi cần tạo cửa sổ phương thức chiếm thanh cuộn của trình duyệt giống như cửa sổ chúng tôi thấy trên Pinterest . Hơn nữa, việc nhấp vào hình ảnh sẽ làm cho hình ảnh đó dịch sang nơi nó sẽ ở trong cửa sổ phương thức.

Lưu ý cách mở modal thay đổi cuộn

Vấn đề: Làm thế nào tôi có thể tạo ra các cửa sổ phương thức tương tự (mất trên thanh cuộn) và hình ảnh động của hình ảnh? Tôi biết rằng URL trong thanh địa chỉ trình duyệt thay đổi khi cửa sổ phương thức xuất hiện, nhưng bạn sẽ thấy rằng trang đó không thực sự thay đổi. Tôi có thể làm điều này bằng cách sử dụng backbone.js vì vậy không phải lo lắng.

HTML Mã

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

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

Answer 1

Trước tiên, tôi muốn đề nghị một cấu trúc html cho phương thức tương tự như của bạn bên dưới:

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

Sau đó, vào 'click', y bạn có thể thêm overflow:hidden vào body và bằng cách nào đó, hãy thêm display:block vào .modal-container. .modal-container sẽ có css tương ứng:

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

Hãy xem xét một ví dụ làm việc tại http://jsfiddle.net/joplomacedo/WzA4y/