如何防止模态叠加对每个新打开的模态变暗?
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>
答案 0 :(得分:3)
您可以使用以下样式:
.modal + .modal-backdrop + .modal + .modal-backdrop {display:none}
或在没有背景的情况下启动额外的模态:
modal.modal({ show:true, backdrop: false });
css版本似乎是最好的,因为它允许你点击opn背景来关闭模式,因为js版本没有&#t; t
修改强>
如果关闭模态并打开一个新模式,则上述css失败。这个应该工作
.modal + .modal-backdrop ~ .modal-backdrop {display:none}
答案 1 :(得分:2)
这对我来说很有用:
.modal-open .modal-backdrop.in:nth-child(2) { opacity: .5 }
.modal-backdrop.in { opacity: 0 }
但通常我建议不要在模态中打开模态。你也想为盒子阴影做类似的事情。
答案 2 :(得分:1)
我有一个带有引导模态的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:自动;已修复)