模态窗口接管浏览器的滚动条，如Pinterest上 [英] Modal window that takes over browser's scrollbar like on Pinterest

问题描述

我有一个模态窗口，将显示内容较长的浏览器的窗口高度，所以我需要创建一个模态窗口，接管浏览器的滚动条，就像我们在Pinterest上看到的。

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

/ strong>

问题：如何创建相同的模态窗口（接管滚动条）和图像的动画？我知道浏览器地址栏中的URL在模态窗口出现时会改变，但你会注意到页面没有真正改变。

HTML代码

 < div id =showModal>点击我！< / div> 
 
< div class =modal> 
< div class =modal_item> 
< div class =modal_photo_container> 
< img src =img / posts / original / 1019_bb8f985db872dc7a1a25fddeb3a6fc3c43981c80.jpgclass =modal_photo> 
< / div> 
< / div> 
< / div> 
  

JS代码

  $（'＃showModal'）click（function（）{
 $（'modal'）。show（）; 
}）; 
  

解决方案

首先，我建议一个html结构模式类似于这一个：

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

然后，在'click'，你可以添加 overflow：hidden 到身体，并以某种方式添加 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/

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.

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.

HTML Code

<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

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

解决方案

First, I'd suggest an html structure for your modal similar to this one:

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

Then, on 'click', you'd add overflow:hidden to body, and, somehow, add display:block to .modal-container. .modal-container would have the corresponding 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/

这篇关于模态窗口接管浏览器的滚动条，如Pinterest上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！