Pinterestのようなブラウザーのスクロールバーを引き継ぐモーダルウィンドウ

Question

モーダルウィンドウはブラウザのウィンドウの高さよりも長いコンテンツを表示するので、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(); 
}); 

Answer 1

まず、私はこの1つにあなたのモーダル同様のためのHTML構造をお勧めしたい：

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

次に、「クリック」すると、y overflow:hiddenをbodyに追加してください。何とかdisplay:blockを.modal-containerに追加してください。

.modal-container { 
    display: none; 
    overflow-y: scroll; 
    position: fixed; 
    top: 0; right: 0; 
    height: 100%; width: 100%; 
} 

がhttp://jsfiddle.net/joplomacedo/WzA4y/

で作業例を見てみましょう： .modal-containerは、対応するCSSを持っているでしょう