我有一个模态窗口,它显示的内容比浏览器的窗口高度长,所以我需要创建一个模态窗口来接管浏览器的滚动条,就像我们在 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();
});
最佳答案
首先,我会为您的模式建议一个类似于此的 html 结构:
<div class="modal-container">
<div class="modal">
</div>
</div>
然后,在“点击”时,将 overflow:hidden
添加到 body
,然后以某种方式将 display:block
添加到.模态容器
。 .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/ 查看一个工作示例
关于javascript - 像 Pinterest 一样接管浏览器滚动条的模态窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11405238/