javascript - 在 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 元素，覆盖整个视口(viewport)并插入 </body> 之前显示模态对话框时的标记。默认情况下，这会在模态背后提供阴影背景，并且还会在需要时监听点击事件以关闭模态。

通过使用 data-backdrop="false"此元素未插入到 DOM 中，因此从视觉上看，模式后面似乎没有任何内容。然而，.modal标签也是一个覆盖所有视口(viewport)的元素(在页面上方，在前景中)，并充当实际 .modal-dialog 的包装器。标签。

因此，在您的场景中，它实际上是 .modal这会阻止(或捕获)来自页面其余部分的用户交互。
您可以在 pointer-events 的帮助下克服它像这样的 css 属性:

.modal {
    pointer-events: none;
}

.modal-dialog仍会收到交互并按预期工作，但后台页面也可以点击。