Bootstrap 4 Modal和jquery-ui datepicker

Question

您好我有以下问题。我最近将Bootstrap升级到版本4.1（来自3.3.X），我试图使模态的行为与以前一样。

我在页面中有一个标准的bootstrap Modal框

<!-- language:all lang-html -->
<div class="modal fade" id="myModal" role="dialog" data-backdrop="static">   
  <div class="modal-dialog">     
    <div class="modal-content">       
      <div class="modal-header modal-header-success">         
        <h1 class="modal-title"></h1>
        <button type="button" class="close" data-dismiss="modal">&times;</button>       
      </div>       
      <div class="modal-body">
        //Some code that contains jquery-ui DatePickers and Tooltips with absolute position
      </div>
    </div>
  </div>
</div>

我希望这个盒子的最大高度几乎等于视口高度，如果内容较高，必要时还有y的内部滚动条。因此我添加了以下css。

CSS： #myModal .modal-body {max-height：calc（100vh - 200px）; overflow-y：auto; }

在模态体内部有一些DatePickers使用jquery-ui和基本工具提示，其中鼠标悬停在绝对位置div上。

问题：当日期选择器和工具提示显示时（如果它们在边界附近），它们会在模态背景“下”并导致x不需要的滚动条。在之前版本的bootstrap中，相同的代码表现不同，工具提示和日期选择器（具有适当的z-index）出现在背景的顶部（需要时）

我正在寻找一个潜在的解决方法来实现与bootstrap-4相同的行为，我曾经使用过bootstrap-3。我知道问题的一部分来自与显示器flex相关联的堆叠上下文。使用z-index值无效并且还试图强制溢出-x：可见;没有达到预期的效果。

我可以尝试避免这些元素靠近边界的情况，但我想知道是否有解决方法。

我也在小提琴中做了一个例子来证明这个问题。它显示了一个简单的悬停工具提示，但行为也与日期选择器相同。

https://jsfiddle.net/psarag/g7dr1tcs/46/

提前致谢！

Answer 1

将此样式用于span标记：

display: none;
position: absolute;
z-index: 9999;
border: 1px solid black;
background-color: rgb(255, 255, 212);
color: rgb(51, 51, 51);

它看起来像这样：