像 Pinterest 一样接管浏览器滚动条的模态窗口答案

【问题标题】：Modal window that takes over browser's scrollbar like on Pinterest像 Pinterest 一样接管浏览器滚动条的模态窗口
【发布时间】：2012-07-10 00:49:57
【问题描述】：

我有一个模态窗口，它显示的内容比浏览器的窗口高度更长，所以我需要创建一个模态窗口来接管浏览器的滚动条，就像我们在 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>

JS 代码

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

【问题讨论】：

标签： javascript jquery css backbone.js

【解决方案1】：

首先，我会为您的模态建议一个类似于此的 html 结构：

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

然后，在“点击”时，您会将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/的一个工作示例

【讨论】：