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

时间:2015-03-19 13:53:25

标签: javascript jquery css twitter-bootstrap kendo-ui

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

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 windowthis fiddle显示了我期望的确切结果(这在我当前的应用中有效)但是使用了剑道。< / p>

3 个答案:

答案 0 :(得分:3)

您可以使用以下样式:

.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

答案 1 :(得分:2)

这对我来说很有用:

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

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

http://jsfiddle.net/pjuv6uzx/

答案 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:自动;已修复)