1

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>

谁能帮我吗？

4

2 回答 2

0

为了让窗口显示在屏幕中心，您需要使用Javascript，确定屏幕中心相对于文档的位置，并将模态窗口定位为“位置：固定；”。为了简单起见，我建议使用 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();
}
于 2013-01-15T16:00:11.607 回答
0

尝试给 body 一个 height:100% ，它应该可以正常工作。

body{
min-height:100%;
}

jsFiddle

于 2013-06-12T22:04:34.590 回答