css - 由于溢出滚动触摸 css，表响应 "breaks"模态内部

Question

如果我在表格响应中的表格内使用模态框，模态框会显示在表格后面。

我几乎不能用 table-backdrop="false" 解决这个问题，但这是一个 hack，不允许完整的模式功能。我也可以更改 bootstrap css，但我想知道是否有一种无需自定义任何内容即可解决此问题的完整证明 bootstrap 方法。

这是什么原因造成的: 我可以通过使用 overflow-x: auto; 来修复它，但这不允许在移动设备上平滑滚动...但是当我添加 -webkit-overflow-scroll: touch，它确实允许 msooth 滚动，但它以与 table-responsive

相同的方式中断

与:

<div class="table-responsive"> //this causes the issues
  <table class="table align-items-center">
    <thead>
      <tr>
        <th scope="col"></th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <th></th>
      </tr>
    </tfoot>
    <tbody class="list">
        <tr>
          <td>
            <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#exampleModal">
              View Order
            </button>
            <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
              <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Order</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                  </div>
                  <div class="modal-body">
                    <div class="table-responsive">
                      <table class="table">
                       ...
                      </table>
                    </div>
                  </div>
                  <div class="modal-footer">
                  </div>
                </div>
              </div>
            </div>
          </td>
        </tr>
    </tbody>
  </table>
</div>

模态框将变灰且不可点击或关闭。从第一个表(顶级 div 类)中删除 table-responsive 后，它将正常工作。当手动使用 overflow-x: auto; -webkit-overflow-scroll: touch 它以同样的方式中断。

模态必须在同一个区域，因为里面的信息依赖于表中的循环。

有解决办法吗？让表格响应移动设备非常重要。

我希望表格响应迅速且滚动流畅。

Answer 1

嘿伙计，你试过在表格响应之外移动模态吗？