html - 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 内部有一些 DatePickers 使用 jquery-ui 和带有绝对位置 div 的基本工具提示，这些 div 会在鼠标悬停时出现。

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

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

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

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

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

提前致谢！

标签： htmlcssbootstrap-4jquery-ui-datepicker

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

它看起来像这样：