没有页面滚动条的响应式引导模式答案

【问题标题】：Responsive Bootstrap modal without page scrollbars没有页面滚动条的响应式引导模式
【发布时间】：2015-08-30 23:59:57
【问题描述】：

我有这个 jsFiddle：http://jsfiddle.net/jsFiddlePlayer/8XdVt/338/

Bootstrap modal 需要填满大部分页面，放置在距页面顶部 100px 的位置，并且不会导致页面滚动。换句话说，整个模态框需要显示在显示区域中。它还有一个背景图像，需要以响应方式适应模态。

我用这个SO post 和this article 来提供帮助。但是如何将模态限制在没有滚动条的显示区域并保持背景图像响应？正如您所注意到的，在某些屏幕尺寸中，模态会切断图片中膝盖处的人物。

该解决方案可以包含 jQuery，因此它不必是纯 CSS。谢谢。

这是 HTML：

<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#onload-popup">
  Launch modal
</button>

<div class="modal fade" role="dialog" aria-hidden="true" id="onload-popup">
    <div class="modal-dialog center-block">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4> 
        </div>
        <div class="modal-body">
          <div class="container-fluid">
            <div class="row">
               Content goes here.
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

这是 CSS：

.modal {
  top:100px;  
}
.modal-backdrop {
  top:100px;
}
.modal-dialog {
  width: 95%;
  height: 100%;
  padding: 0;
}
.modal-content {
  min-height: 100%; 
  height: auto;
  border-radius: 0;
  overflow:auto;
  background-size: cover;
  background-image:  url('data:image/jpg;base64, /* ... image code ... */');
  background-repeat: no-repeat;
  background-attachment: local;
  background-position: center center;   
}

更新：接近解决方案：http://jsfiddle.net/jsFiddlePlayer/8XdVt/341/ 它仍然不能很好地处理模态框的背景图像，因为它被剪裁了，但我认为没有任何办法周围。

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

好吧，您需要一些视口空间才能正确显示图像，不知道这是否有帮助，但这里是我为移除滚动条和顶部居中图像所做的更改（因此它不能切断头部)

.modal {
  top:100px;
  overflow: hidden;
  overflow-y: hidden;
}
.modal-content {
  background-position: top center;   
}

【讨论】：

谢谢，@Michelem。但是模态的内容不应该被剪裁（溢出隐藏）。

【解决方案2】：

尝试更改其中的一些 CSS。底部还有一些背景图片。

        .modal {
          top:7%;  

        }
        .modal-backdrop {
          top:10%;
        }        
        .modal-dialog {

          width: 100%;
          height: 100%;
          padding: 0;
        }

【讨论】：

【解决方案3】：

如果你想在 webkit 上做，你可以使用

.modal.fade.in::-webkit-scrollbar{
    display:none
}

但我不确定是否可以在 IE 上使用不同的方式进行操作，还有另一种解决方案；

.modal.fade.in{
    overflow-y:hidden;
}

如果你使用第二个选项，你应该玩一些模态的位置以使其完全可见。

【讨论】：