Bootstrap 模态，模态正文溢出，弹出窗口在页眉或页脚下弹出。任何解决方法？

Question

我正在寻找 bootstrap 问题的适当解决方法。

当我们使用来自其他一些堆栈溢出问题的以下 css hack 来确保模态框不会高于屏幕并同时为正文设置垂直滚动条时。这实际上工作得很好并且是期望的行为。

.modal-body {
  max-height: calc(100vh - 210px);
  overflow-y: auto;
}

模态主体内的弹出窗口在页眉 and/or 页脚下方弹出。请参阅以下 fiddle 示例：https://jsfiddle.net/2qeo99k3/4/ 或下面的代码。在搜索或单击可能已经有了我的答案的问题后，我没有找到关于这个特定问题的任何答案。更改弹出框 z-index 无效。

<style>
  .modal-body {
    max-height: calc(100vh - 210px);
    overflow-y: auto;
  }
</style>

<script type="text/javascript">
  $(document).ready(function () {
    $('[data-toggle="popover"]').popover();
  });
</script>

<div style="padding:12px">
  This example have a popover at the top and one at the bottom.  Click them to see that the popup shows under the header or the footer of the modal when using the css for the modal-body
  <br>
  <br>

  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
    Launch demo modal
  </button>

  <!-- Modal -->
  <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <a class="btn btn-primary" data-toggle="popover" data-html="true" data-placement="top" data-content="This is one line<br>This is another line<br>This is another line">Show bootstrap popover top</a>
  <br><br>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis enim in eros tincidunt, non finibus velit rutrum. Donec ultricies arcu sed tellus vestibulum, ornare rutrum massa ultrices. Sed sem metus, mattis ut dolor ut, interdum mattis nisi. Suspendisse auctor libero sit amet faucibus iaculis. Curabitur in eros dictum, auctor nulla a, aliquet est. Aenean vitae aliquet sem. Curabitur in lobortis justo. 
  Nullam quis purus quis ex venenatis rutrum. Morbi mattis leo nisi, a vehicula risus venenatis egestas. Suspendisse gravida eu nisl mattis rutrum. In mi metus, hendrerit a velit eu, mollis facilisis lorem. Quisque est nibh, volutpat nec ante ac, dictum congue tortor. Maecenas dui magna, vulputate at nisi a, pretium hendrerit turpis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean maximus magna in erat hendrerit, non placerat lorem vestibulum. Suspendisse ut nulla at ante fermentum sollicitudin. Proin tincidunt tempus urna at imperdiet. Nullam eget urna justo. Quisque nec est ante. 
  Nullam auctor dictum metus, in congue sapien eleifend eget. Quisque facilisis tortor in lorem commodo, eget vulputate diam condimentum. Proin ultrices orci ut feugiat pellentesque. Proin vitae malesuada erat. Quisque lacinia odio accumsan, sollicitudin turpis vitae, efficitur libero. Quisque bibendum, nibh sit amet imperdiet efficitur, metus turpis pharetra dolor, quis hendrerit nisi arcu sed mauris. In quis felis tincidunt, blandit libero et, scelerisque quam. Ut in magna vestibulum, pellentesque neque eu, porta justo. Quisque id justo consequat, suscipit neque non, porta dui. 
  Suspendisse potenti. Curabitur convallis varius lacus a eleifend. Suspendisse et finibus neque. Vivamus efficitur, tortor at malesuada faucibus, sem ipsum scelerisque nisl, vitae imperdiet nunc ex at ex. Vivamus suscipit volutpat porta. Nunc nisl mauris, blandit in molestie in, sollicitudin id lacus. Cras tempor, tortor non placerat cursus, purus nunc fermentum felis, vitae cursus lorem nisi vel enim. Sed quis maximus elit. Suspendisse ullamcorper, nulla et gravida porta, mi lorem sollicitudin leo, id consectetur velit nunc non libero. Nullam nec felis vel lorem feugiat placerat. Donec id elit sed nibh volutpat faucibus sed iaculis purus. Suspendisse vulputate, nibh sed scelerisque porta, diam felis condimentum massa, a convallis nulla libero id erat. Phasellus vestibulum lectus imperdiet, porta nibh at, sagittis massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean fermentum tincidunt tortor, at lacinia urna gravida eget.       
  <br><br>
          <a class="btn btn-primary" data-toggle="popover" data-html="true" data-placement="bottom" data-content="This is one line<br>This is another line<br>This is another line">Show bootstrap popover bottom</a>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

哇，真快。经过更多搜索后，我发现了这个：

$('[data-toggle="popover"]').popover({ container: 'body' });

解决问题

Bootstrap 模态，模态正文溢出，弹出窗口在页眉或页脚下弹出。任何解决方法？

Bootstrap modal, modal-body with overflow, popover pops under header or foorter. Any workaround?

bootstrap-modal

bootstrap-popover