Question

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

Bootstrap模式需要填充页面的大部分内容，从页面顶部放置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/它仍然不能很好地与模态的背景图像一起使用，因为它会被修剪，但我认为没有任何方式。

Answer 1

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

        .modal {
          top:7%;  

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

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

Answer 2

如果您想在webkit上执行此操作，可以使用

C:\test>perl -w net_smtp.pl
Net::SMTP>>> Net::SMTP(3.08)
Net::SMTP>>>   Net::Cmd(3.08)
Net::SMTP>>>     Exporter(5.72)
Net::SMTP>>>   IO::Socket::INET(1.35)
Net::SMTP>>>     IO::Socket(1.38)
Net::SMTP>>>       IO::Handle(1.36)
Net::SMTP=GLOB(0x58e8fc)<<< 220 Hi
Net::SMTP=GLOB(0x58e8fc)>>> EHLO localhost.localdomain
Net::SMTP=GLOB(0x58e8fc)<<< 250 OK

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

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

如果您使用第二个选项，您应该播放一些模态以使其完全可见。

Answer 3

嗯，你需要一些视口空间来正确显示图像，不知道这是否有帮助，但这里是我为删除滚动条和使图像偏心的更改（因此它不能有头部切割-off）

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

无页面滚动条的响应式Bootstrap模式

3 个答案: