滚动时，Twitter Bootstrap Modal窗口不会保持在屏幕中心

Question

New to Twitter Bootstrap and CSS but not programming in general. Curious about an issue that has me sleepless in searching for solution. I am currently opening a Modal Window to collect some data from the user. The page extends past the bottom of the screen via a scroll bar.

The modal opens in the center of the page as opposed to the center of the view screen. I'm using the CSS below:

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

and the HTML is as follows:

    <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…</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>

Can anyone help me out?

Answer 1

In order to get the window to display in the center of the screen, you need to use Javascript, determine where the center of the screen is relative to the document and position the modal window there as "position: fixed;". I would recommend using JQuery for the simplicity, here some example code.

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