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

但根本没有用。

要清楚，我已经在我的应用上用Bootstrap模式替换了Kendo window而this fiddle显示了我期望的确切结果（这在我当前的应用中有效）但是使用了剑道。< / p>

Answer 1

您可以使用以下样式：

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

Example

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

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

Example

css版本似乎是最好的，因为它允许你点击opn背景来关闭模式，因为js版本没有＆＃t; t

修改

如果关闭模态并打开一个新模式，则上述css失败。这个应该工作

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

Example

Answer 2

这对我来说很有用：

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

但通常我建议不要在模态中打开模态。你也想为盒子阴影做类似的事情。

http://jsfiddle.net/pjuv6uzx/

Answer 3

我有一个带有引导模态的Laravel-Vue项目。我有一个模态，其内容通过vue的if语句更改。无论如何，模式背景在dekstops或Android设备上都没有问题。但是，在iOS上，当模式内部发生某些更改时，模式背景会闪烁，尽管实际上并没有关闭或重新打开它。背景叠加层“闪烁”，因为它变暗（不透明性降低），然后返回到正常的不透明状态。就我而言，这似乎已解决：

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

（因此添加：-webkit-overflow-scrolling：自动；已修复）

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

3 个答案: