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

尝试给身高：100％到身体，它应该像你一样工作。

body{
min-height:100%;
}

jsFiddle

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

2 个答案: