ブートストラップモーダル、モーダルボディ、オーバーフロー、ヘッダーまたはより下のポップオーバーポップ。回避策はありますか？

Question

私はそのブートストラップ問題の適切な回避策を探しています。

他のスタックオーバーフローの質問から次のCSSハックを使用して、モーダルが画面より高くならず、同時に本体の垂直スクロールバーがあることを確認します。これは実際にはうまく動作し、望ましい動作です。

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

モーダルボディ内のポップオーバーがヘッダーまたはフッターの下にポップします。たとえば、https://jsfiddle.net/2qeo99k3/4/ のコードを参照してください。私はこの特定の問題について、私の答えをすでに持っているかもしれない質問を検索したり、クリックしたりしても、何の答えも見つけられませんでした。ポップオーバーZ-インデックスを変更しても効果はありません。

<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' }); 

それは問題にまで