模态主体中的弹出框被模态页脚覆盖

Question

我有一个带有几个按钮的 Bootstrap 4 模态，其中一个应该切换自定义弹出框 div，它位于触发它的按钮下方的中心。当弹出框样式不在模式中时，它们可以正常工作，但模式中的某些内容会导致弹出框部分隐藏。

我尝试了

overflow:

和

z-index:

样式的几种变体，但似乎无法弄清楚这一点。

如何让弹出框在相对于“Button 1”按钮的当前位置完全可见？

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>


<div class="modal" tabindex="-1" data-backdrop="static" data-keyboard="false" data-show="false" data-focus="true" style="display: block;">
  <div class="modal-dialog">
    <div class="modal-content">
    
      <!-- Modal Header -->    
      <div class="modal-header" style="margin-bottom: 0px; padding: 0.5rem 1rem; border-bottom: 0px; background-color: rgb(248, 249, 252);">
        <h5 class="modal-title text-center">
          Title Here
        </h5>
        <button type="button" class="close"><span aria-hidden="true">&#215;</span></button>
      </div>
      
      <!-- Modal Body -->
      <div class="modal-body" style="padding: 0px; max-height: 80vh; overflow: auto;">
        <div class="card card-body" style="padding: 0.5em; border: 0px; margin: 0px; overflow: hidden;">
          <div style="margin: 0.5em; padding: 0px;">
            Lorem ipsum dolor sit amet consectetur adipiscing elit nec montes eleifend
          </div>
          <hr style="margin-bottom: 3px; margin-top: 3px;" />
          
          <!-- Modal Buttons --> 
          <div class="row">
            <div class="col-6 text-center">
              <button class="btn btn-sm text-muted user-comm-react-btn">Button 1</button>
              
              <!-- Button 1 Popover Div --> 
              <div class="text-center bg-light shadow" style="position: absolute; width: fit-content; margin: 0px auto; border-radius: 2em; left: 50%; transform: translateX(-50%); z-index: 999; white-space: nowrap; border: 1px solid rgb(227, 230, 240);">
                Lorem ipsum dolor sit amet consectetur adipiscing elit nec montes eleifend
              </div>
              
            </div>
            <div class="col-6 text-center">
              <button class="btn btn-sm text-muted">Button 2</button>
            </div>
          </div>
          
          <hr style="margin-bottom: 3px; margin-top: 3px;" />
        </div>
      </div>
      
      <!-- Modal Footer -->
      <div class="modal-footer" style="padding: 0.25em; border-top: medium;z-index: 4;">
        Lorem ipsum dolor sit amet consectetur adipiscing elit nec montes eleifend
      </div>
      
    </div>
  </div>
</div>

Answer 1

我在

overflow:hidden

上有

.card-body

。删除它就是解决方案。