11

ブラウザーのウィンドウの高さよりも長くコンテンツを表示するモーダル ウィンドウがあるため、Pinterest で見られるようなブラウザーのスクロールバーを引き継ぐモーダル ウィンドウを作成する必要があります。さらに、画像をクリックすると、その画像がモーダル ウィンドウ内の場所に変換されます。

モーダルを開くとスクロールバーがどのように変化するかに注意してください

ここに画像の説明を入力

問題:同じモーダル ウィンドウ (スクロールバーを引き継ぐ) と画像のアニメーションを作成するにはどうすればよいですか? モーダル ウィンドウが表示されると、ブラウザーのアドレス バーの URL が変化することはわかっていますが、実際にはページが変化していないことに気付くでしょう。backbone.js を使用してこれを行うことができるので、心配はいりません。

HTML コード

<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 コード

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

1 に答える 1

22

まず、これに似たモーダルのhtml構造を提案します。

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

次に、「クリック」で、に追加overflow:hiddenしbody、どういうわけか、に追加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/で実際の例を見てください

于 2012-07-10T02:05:25.190 に答える