引导模态，模态主体溢出，在页眉或页脚下弹出弹出窗口。任何解决方法？

问题描述

我正在为该引导程序问题寻求适当的解决方法。

I'm looking for a proper workaround for that bootstrap problem.

当我们使用其他一些堆栈溢出问题中的以下css hack来确保模态不不会比屏幕高，同时具有用于机身的垂直滚动条。

When we use the following css hack from some other stack overflow questions to make sure the modal doesn't go higher than the screen and at the same time having a vertical scrollbar for the body. This actually works just fine and is the desired behavior.

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

模态主体中的弹出框弹出到页眉和/或页脚下方。请参见以下小提琴示例：
或下面的代码。在搜索或单击可能已经有我答案的问题后，我没有找到关于此特定问题的任何答案。

the popover inside the modal-body pops under the header and/or footer. See the following fiddle for an example : https://jsfiddle.net/2qeo99k3/4/or the code bellow. I didn't find any answers on this specific problem after searching or clicking questions that may already have my answer. Changing the popover z-index has no effect.

<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>

推荐答案

哇，速度很快。经过更多搜索后，我发现：

Wow it was fast. After searching even more I found this :

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

它可以解决问题

这篇关于引导模态，模态主体溢出，在页眉或页脚下弹出弹出窗口。任何解决方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！