模态窗口接管浏览器的滚动条类似Pinterest上

我将显示的内容不再是浏览器的窗口高度模式窗口，所以我需要创建一个接管布劳尔的滚动条像我们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(); 
});

来源

2012-07-10 Nyxynyx

首先，我建议你的模式与此类似的HTML结构：

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

然后，点击'y'请将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/

看看工作示例

来源

2012-07-10 02:05:25 banzomaikaka

模态窗口接管浏览器的滚动条类似Pinterest上

回答

相关问题