Question

由于我无法控制的原因，我们仍然使用Bootstrap 2.3.2。我有一个模态弹出窗口，可能会显示1到50行信息。我将它设置为最大尺寸以适应屏幕并制作中间部分，如果需要，.modal-body有一个滚动条。我的HTML看起来像：

<div id="confirm-popup" class="modal hide fade" role="dialog"
    aria-labelledby="confirm-popup-subject" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="confirm-popup-subject">XXX</h3>
  </div>
  <div class="modal-body" id="confirm-content">
  </div>
  <div class="modal-footer">
    <button id="confirm-popup-edit" class="btn" data-dismiss="modal"
    aria-hidden="true">Edit</button>
    <button id="confirm-popup-cancel" class="btn" data-dismiss="modal"
    aria-hidden="true">Cancel</button>
    <button id="confirm-popup-submit" class="btn btn-primary"
    aria-hidden="true" data-dismiss="modal">Create Ticket</button>
  </div>
</div>

使用JavaScript在弹出之前填写$('#confirm-popup-subject')和$('#confirm-content')。

我使用以下CSS覆盖来获取此信息：

#confirm-poup {
  top: 2%;
  bottom: 2%;
  overflow: initial;
}

#confirm-popup .modal-body {
  overflow-y: auto;
  max-height: 80%;
}

这使得对话框占据了大部分屏幕，如果它需要滚动条，它就拥有它。但现在客户说，当它只有几行文字显示时，他们不希望它如此之大。他们希望它是最小尺寸并且仍然适合正文文本，但如果正文不适合屏幕，它还会在模态体上有一个滚动条。这可能吗？

Answer 1

经过一些实验，如果我将CSS改为此，我得到了可接受的结果：

setState

它并不完美 - 如果我将浏览器设置得太短，它会与屏幕重叠 - 但它适用于所有支持的浏览器尺寸。

如果需要，使用滚动条使模态弹出窗口足够大

1 个答案: