Подтвердить что ты не робот

Модальное окно, которое использует панель прокрутки браузера, как на Pinterest

У меня есть модальное окно, в котором будет отображаться содержимое дольше, чем высота окна браузера, поэтому мне нужно создать модальное окно, которое занимает панель прокрутки броузера, как тот, который мы видим на Pinterest. Кроме того, нажатие на изображение приведет к тому, что изображение переведет туда, где оно будет в модальном окне.

Обратите внимание, как открытие модального изменения полосы прокрутки

enter image description here

Проблема: Как создать такое же модальное окно (занимает панель прокрутки) и анимацию изображения? Я знаю, что URL-адрес в адресной строке браузера изменяется, когда появляется модальное окно, но вы заметите, что страница не изменилась. Я могу сделать это, используя backbone.js, поэтому не беспокойтесь.

Код 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>

Код JS

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

Ответ 1

Во-первых, я бы предложил структуру html для вашего модального типа, подобного этому:

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

Затем, в 'click', вы должны добавить overflow:hidden в body и как-нибудь добавить display:block в .modal-container. .modal-container будет иметь соответствующий css:

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

Взгляните на рабочий пример на http://jsfiddle.net/joplomacedo/WzA4y/