0

我想创建类似的东西：http: //tapiture.com/popular

不是网站，而是 onClick 图像事件。单击图像时，滚动条会调整为覆盖图像的高度。

我怎样才能使用 jquery 做这样的事情？

4

2 回答 2

2

当他们打开一个模式时，他们将以下类添加到正文中

   .modal-open {
        overflow: hidden;
        position: relative;
    }

因此，在隐藏溢出的情况下，模态后面的所有图像都被隐藏了。所以滚动条适应模态的内容。

在模态层上，他们添加了这个类

.modal-scrollable {
    bottom: 0;
    left: 0;
    overflow: auto;
    position: fixed;
    right: 0;
    top: 0;
}

注意溢出是如何自动的，这意味着滚动条会在需要时显示在该层上。

于 2013-02-26T18:48:20.860 回答
1

正如所承诺的，这是我所做的代码。

查询： 


    $('.item').on('click','img', function(){
        $this = $(this);
        $('body').addClass('modal_open');
        $('#overlay').fadeIn();
        $('#img_zoom').html('new and bigger image tag').fadeIn();
    });

CSS：

#overlay{z-index: 1; position: fixed; height: 100%; width:100%; background: rgba(255,255,255,0.3); display:none;}
#img_zoom{position: fixed; z-index: 2; box-shadow: 0 0 5px #000; display:none; bottom: 0; left: 0; overflow: auto; right: 0; top: 0;}

.modal_open {overflow: hidden; position: relative; }
.modal_scrollable {bottom: 0; left: 0; overflow: auto; position: fixed; right: 0; top: 0; }

感谢ComputerArts

于 2013-02-26T19:52:59.400 回答