防止模态背景叠加在每个打开的新模态上变暗

Question

对于每个新打开的模态，如何防止模态的叠加变暗？

这个小提琴会让事情变得清楚。您会注意到每个新模式的背景叠加层都变暗。

我试图清除后续模态窗口的背景，添加具有以下属性的类：

background: none 
// and
background: transparent
// and
background-color: rgba(0, 0, 0, 0) // reset bg
// and
background-color: rgba(255, 255, 255, 1); // all clear and transparent bg

但没有一个工作。

明确地说，我正在我的应用程序上用 Bootstrap 模式替换Kendo 窗口，这个小提琴显示了我期望的确切结果（在我当前的应用程序中工作）但使用的是 Kendo。

Answer 1

您可以使用以下样式：

.modal + .modal-backdrop + .modal + .modal-backdrop {display:none}

例子

或者在没有背景的情况下启动额外模态：

modal.modal({ show:true, backdrop: false });

例子

css 版本似乎是最好的，因为它允许您单击背景来关闭模式，而 js 版本则不允许

编辑

如果您关闭模式并打开一个新模式，则上述 css 会失败。这个应该可以代替

.modal + .modal-backdrop ~ .modal-backdrop {display:none}

例子