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

问题描述

我将显示内容较长，浏览器窗口的高度模式窗口，所以我需要创建一个接管布劳尔的滚动条像我们Pinterest上看到了一个模态窗口。此外，点击在图像上会导致该图像转化为它会在模式窗口

注意如何打开模式改变滚动条

问题：如何创建相同的模态窗口（接管滚动条）和图像的动画？我知道在出现的窗口模式时，在浏览器地址栏中的URL变化，但你会发现，页面并没有真正改变。我可以用这个Backbone.js的所以不用担心的事情。

HTML code

 ＆LT; D​​IV ID =的ShowModal＆gt;点击ME＆LT;！/ DIV＆GT;＆LT; D​​IV CLASS =模式＆GT;
    ＆LT; D​​IV CLASS =modal_item＆GT;
        ＆LT; D​​IV CLASS =modal_photo_container＆GT;
            ＆LT; IMG SRC =IMG /职位/原厂/ 1019_bb8f985db872dc7a1a25fddeb3a6fc3c43981c80.jpg级=modal_photo＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

JS code

  $（'＃的ShowModal'）。点击（函数（）{
    $（'模式'）显示（）。
}）;
 

解决方案

首先，我建议的HTML结构模态的类似这样的：

 ＆LT; D​​IV CLASS =模式容器＆GT;
        ＆LT; D​​IV CLASS =模式＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
 

然后，在点击，你会加入溢出：隐藏到体和，不知何故，添加显示：块到 .modal容器。 .modal容器将有相应的CSS：

  .modal容器{
   显示：无;
   溢出-Y：滚动;
   位置：固定;
   顶部：0;右：0;
   高度：100％;宽度：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屋！