bootstrap css - 如何在不影响背景的情况下制作模态对话框模态答案

【问题标题】：bootstrap css - how to make a modal dialog modal without affecting the backgroundbootstrap css - 如何在不影响背景的情况下制作模态对话框模态
【发布时间】：2020-01-20 21:25:57
【问题描述】：

在引导 css 中，可以显示模态对话框，但我希望能够使其成为模态，这样后面的 UI 就不会响应，而不会显示深黑色背景。

似乎没有允许我在 $("#selector").modal() 函数上执行此操作的选项。

【问题讨论】：

能否将相关代码发布为 jsfiddle.net 供我们查看和使用？这实际上需要几秒钟。
谢谢，这里是小提琴：jsfiddle.net/NUVrd/1

标签： twitter-bootstrap

【解决方案1】：

将data-backdrop="false" 添加到<div class="modal">，Bootstrap 将完成剩下的工作。

例子：

<div class="modal" id="genericModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false">

【讨论】：

这是最干净的答案。应该是批准的。
此解决方案影响背景。不是你看到的，而是你点击的。

【解决方案2】：

摆脱背景：

模态启动后

>

$('#XXX').modal({show:true});

只需触发下面的代码

 $('.modal-backdrop').removeClass("modal-backdrop");

【讨论】：

查看下面 Alex Marple 的答案，了解正确方法。
@FastTrack 感谢您的提醒，所以应该改变他们对答案的排序方式。太多时候，最好的解决方案被埋没在热门问题上。
这将使背景消失，但其后面的元素不可点击。

【解决方案3】：

正确的方法是在创建模态时传递参数backdrop: false

$('#modal').modal({
  backdrop: false
})

【讨论】：

【解决方案4】：

我更喜欢只隐藏背景，以便您仍然具有单击模式以隐藏它的功能。

.modal-backdrop { opacity: 0 !important; }

【讨论】：

【解决方案5】：

如果我是正确的，你应该可以通过调用来做到这一点：

$("#selector").modal({
    backdrop: "static"
});

然后只需更改背景类的 CSS 即可。

【讨论】：

【解决方案6】：

当然，您需要做的就是调整 CSS 以更改黑色背景的不透明度。阻止对底层元素的点击不必可见（除非有一些我不知道的点击劫持保护？）。目标类是 div.modal-backdrop。

【讨论】：

我刚刚对此进行了测试，在该元素上设置了 opacity: 0 后，它仍然会拦截点击。

【解决方案7】：

只需使用css样式作为

 .modal-backdrop {background: none;}
 .modal{background: none;}

对于您希望在应用中显示的每个模式，您的所有模式背景都会消失。

【讨论】：