javascript 像 Pinterest 一样接管浏览器滚动条的模态窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11405238/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Modal window that takes over browser's scrollbar like on Pinterest
提问by Nyxynyx
I have a modal window that will display content longer that the browser's window height, so I need to create a modal window that takes over the brower's scrollbar like the one we see on Pinterest. Furthermore, clicking on the image will cause that image to translate to where it will be in the modal window.
我有一个模态窗口，它会显示比浏览器窗口高度更长的内容，所以我需要创建一个模态窗口来接管浏览器的滚动条，就像我们在 Pinterest 上看到的那样。此外，单击图像将导致该图像转换到它在模式窗口中的位置。
Note how the opening the modal changes the scrollbars
注意打开模态如何改变滚动条
Problem:How can I create the same modal window (takes over scrollbar) and animation of the image? I know that the URL in the browser address bar changes when the modal window appears, but you will notice that the page did not really change. I am able to do this using backbone.js so no worries.
问题：如何创建相同的模态窗口（接管滚动条）和图像动画？我知道当模态窗口出现时浏览器地址栏中的 URL 会发生变化，但是您会注意到页面并没有真正发生变化。我可以使用backbone.js 做到这一点，所以不用担心。
HTML Code
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 Code
JS代码
$('#showModal').click(function() {
$('.modal').show();
});
回答by banzomaikaka
First, I'd suggest an html structure for your modal similar to this one:
首先，我会为您的模态建议一个类似于这个的 html 结构：
<div class="modal-container">
<div class="modal">
</div>
</div>
Then, on 'click', you'd add overflow:hiddento body, and, somehow, add display:blockto .modal-container. .modal-containerwould have the corresponding css:
然后，在“单击”时，您将添加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%;
}
Take a look at a working example at http://jsfiddle.net/joplomacedo/WzA4y/
看看http://jsfiddle.net/joplomacedo/WzA4y/上的一个工作示例
