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

オーバーフローが auto であることに注意してください。つまり、そのレイヤーで必要に応じてスクロールバーが表示されます。

于 2013-02-26T18:48:20.860 に答える
1

約束通り、これが私がしたコードです。

JQuery： 


    $('.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 に答える