Question

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

.modal-backdrop {
    display: none;
}

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

我的模态：

<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仍然会收到互动，并会按预期工作，但后台的页面也可以点击。

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

1 个答案: