Bootstrap 4 模态和 jquery-ui 日期选择器

Question

您好，我遇到以下问题。我最近将 Bootstrap 升级到了 4.1 版（从 3.3.X 开始），我正在尝试让模态框的行为方式与以前相同。

我在页面中有一个标准的引导模式框

<!-- 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 { 最大高度：计算（100vh - 200px）；溢出-y：自动； }

在 modal-body 内部有一些使用 jquery-ui 的 DatePickers 和带有绝对位置 div 的基本工具提示，在鼠标悬停时会出现。

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

我正在寻找一种潜在的解决方法，以使用 bootstrap-4 实现与 bootstrap-3 相同的行为。我知道问题的一部分来自与显示 flex 相关的堆叠上下文。使用 z-index 值没有任何效果，并且还试图强制溢出-x：可见；没有得到想要的结果。

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

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

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

看起来像这样：