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

时间:2018-01-17 20:29:08

标签: javascript css bootstrap-4

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

.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文件?

1 个答案:

答案 0 :(得分: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仍然会收到互动,并会按预期工作,但后台的页面也可以点击。