在Bootstrap 4中启用模式打开后启用后台使用

Question

这里还有其他类似的问题，但他们都提到要改变这个：

.modal-backdrop {
    display: none;
}

为了在模态打开时使用页面的其余部分，除了我的模态没有这个.modal-backdrop，我不知道它是否是Bootstrap 4的新功能，但是这个解决方案不起作用。

我的模态：

<div class="modal" data-keyboard="false" data-backdrop="false" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header bg-primary text-white" id="header" style="cursor: move">
            Search
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <form id="forms">
            </form>
            <hr>
            <div class="container" id="table">
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary">Export</button>
          </div>
        </div>
    </div>
</div>

这里的想法是只有一个可拖动的对话窗口（我正在使用jquery UI），模态是正确的组件吗？ 还是卡？ 我使用模态，因为他们已经在中心位置，你不需要javascript来设置关闭按钮。

同时接受外部库的建议，这些库实现了类似面板的模块，并与Bootstrap集成。

有没有办法使背景启用而不会过多地搞乱Bootstrap文件？

Answer 1

我在这里专注于.modal-backdrop ，因为我假设你已经通过使用jQuery UI解决了可拖动的部分。

当使用它时， .modal-backdrop实际上是一个固定的div元素，覆盖整个视口，并在显示模式对话框时插入</body>标记之前。 默认情况下，这会在模态后面提供阴影背景，并且还会监听单击事件以在需要时关闭模式。

通过使用data-backdrop="false"此元素不会插入到DOM中，因此在视觉上看起来模态后面没有任何内容。 但是， .modal标记也是一个覆盖所有视口的元素（在页面上方，在前景中），并充当实际.modal-dialog标记的包装。

因此，在您的场景中，实际上是.modal阻止（或捕获）来自页面其余部分的用户交互。
您可以在pointer-events css属性的帮助下克服这一点，如下所示：

.modal {
    pointer-events: none;
}

.modal-dialog仍将接收交互并将按预期工作，但后台中的页面也是可点击的。