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

Question

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

This fiddle会把事情说清楚。您会注意到每个新模态的背景叠加层都变暗了。

我试图清除后续模态窗口的背景，添加一个具有这些属性的类:

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

但根本没有效果。

明确地说，我正在替换 Kendo window通过我的应用程序上的 Bootstrap 模态和 this fiddle显示我期望的确切结果(在我当前的应用程序中工作)但使用 Kendo。

Answer 1

您可以使用以下样式:

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

Example

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

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

Example

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

编辑

如果关闭模式并打开一个新模式，上面的 css 将失败。这个应该可以代替

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

Example