最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Modal window that takes over browser's scrollbar like on Pinterest - Stack Overflow

programmeradmin4浏览0评论

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();
});

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();
});
Share Improve this question asked Jul 10, 2012 at 0:49 NyxynyxNyxynyx 63.6k163 gold badges505 silver badges855 bronze badges
Add a comment  | 

1 Answer 1

Reset to default 22

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/

发布评论

评论列表(0)

  1. 暂无评论