Javascript 接管浏览器的模式窗口'；s与Pinterest上的滚动条类似

我有一个模式窗口，它将显示比浏览器窗口高度更长的内容，因此我需要创建一个模式窗口，它接管浏览器的滚动条，就像我们在Pinterest上看到的那样。此外，单击图像将使该图像转换到模态窗口中的位置

注意打开模式如何更改滚动条

问题：如何创建相同的模式窗口（接管滚动条）和图像动画？我知道当模式窗口出现时，浏览器地址栏中的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>

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

---

首先，我建议您的模式使用类似于以下内容的html结构：

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

请看下面的一个工作示例

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