这里还有其他类似的问题,但他们都提到改变这个问题:
.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">×</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文件?
答案 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
仍然会收到互动,并会按预期工作,但后台的页面也可以点击。