Question

我正在为该引导问题寻找合适的解决方法。

当我们使用以下来自其他堆栈溢出问题的css hack来确保模态不会高于屏幕并且同时具有身体的垂直滚动条。这实际上很好，是理想的行为。

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

模态体内的弹出窗口在标题和/或页脚下弹出。请参阅以下小提琴，获取示例：https://jsfiddle.net/2qeo99k3/4/ 或者代码吼叫。在搜索或点击可能已有答案的问题后，我没有找到关于此特定问题的任何答案。更改popover 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模态，带溢出的模态体，popover在标题或foorter下弹出。任何解决方法？

1 个答案: