php - Twitter Bootstrap Modal ウィンドウがスクロール時に画面の中央に表示されない

Question

Twitter Bootstrap と CSS は初めてですが、プログラミング全般については知りません。解決策を探すのに眠れない問題に興味があります。現在、ユーザーからデータを収集するためにモーダル ウィンドウを開いています。ページは、スクロール バーを介して画面の下部を超えて拡張されます。

ビュー画面の中央ではなく、ページの中央にモーダルが開きます。以下のCSSを使用しています。

    .modal {  
      width:  200px;
      height: 200px;  
      position:fixed;
      top: 50%;
      left: 50%;
      margin-left:  -100px;
      margin-top: -100px;
      z-index: 1050;
      background-color: #ffffff;
      border: 1px solid #999;
      border: 1px solid rgba(0, 0, 0, 0.3);
      *border: 1px solid #999;
      -webkit-border-radius: 6px;
       -moz-border-radius: 6px;
         border-radius: 6px;
      outline: none;
      -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
        -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
        box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
       -webkit-background-clip: padding-box;
       -moz-background-clip: padding-box;
         background-clip: padding-box;
    }

HTMLは次のとおりです。

    <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog"   
 aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal"     
 aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…&lt;/p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

誰でも私を助けることができますか？

Answer 1

ウィンドウを画面の中央に表示するには、Javascript を使用し、画面の中央がドキュメントに対して相対的な位置を特定し、そこにモーダル ウィンドウを "position: fixed;" として配置する必要があります。簡単にするためにJQueryを使用することをお勧めします。ここにサンプルコードがあります。

function showModal(){
  var $modal = $(".modal");
  var winH = $(window).height();
  var winW = $(window).width();

  $modal.css({
    position:"fixed",
    left: ((winW - $modal.outerWidth())/2 + $(document).scrollLeft()),
    top: ((winH - $modal.outerHeight())/2 + $(document).scrollTop())
  }).show();
}

Answer 2

body に height:100% を指定してみてください。

body{
min-height:100%;
}

jsフィドル