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

Question

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

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

我试图清除后续模态的背景windows添加具有这些属性的class：

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

但是 none 完全有效。

明确地说，我正在替换 Kendo window by Bootstrap modal on my app and 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

Answer 2

这对我有用 chrome:

.modal-open .modal-backdrop.in:nth-child(2) { opacity: .5 }
.modal-backdrop.in { opacity: 0 }

但通常我会建议不要在模态中打开模态。您还需要对框阴影执行类似的操作。

http://jsfiddle.net/pjuv6uzx/

Answer 3

我有一个 Laravel - 具有 bootstrap 模式的 vue 项目。我有一个模式，其内容通过 vue 的 if 语句更改。无论如何，模态背景在桌面或 Android 设备上没有问题。但是，在 iOS 上，当模态内部发生某些变化时，模态背景会闪烁，尽管它实际上并没有关闭或重新打开。背景叠加 'flickers' 因为它变得更暗（不透明度降低）然后返回到正常的不透明度状态。这似乎已经解决了我的问题：

.modal-open .modal{
  background-color: rgba(0,0,0,0.5);
  -webkit-overflow-scrolling: auto;
}

（因此添加：-webkit-overflow-scrolling: auto；已修复）

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

Prevent modal background overlay to get darker on each new modal opened

javascript

css

jquery

twitter-bootstrap

kendo-ui