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

【问题标题】：Enable background use with modal open in Bootstrap 4在 Bootstrap 4 中启用模式打开的后台使用
【发布时间】：2018-06-26 19:52:10
【问题描述】：

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

.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 文件的情况下启用背景？

【问题讨论】：

您应该发布一个完整代码示例。因此，它实际上可以被查看/测试等。

标签： javascript css bootstrap-4

【解决方案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 仍将接收交互并按预期工作，但后台页面也可以点击。

【讨论】：