防止模式背景覆盖在每个打开的新模式上变得更暗

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

本文关键字：模式 新模式 覆盖 背景      更新时间：2023-09-26

如何防止每个新打开的模态的覆盖变得更暗？

这把小提琴会把事情弄清楚的。您会注意到每一个新模态的背景覆盖都会变暗。

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

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窗口，这个fiddle显示了我期望的结果（在我当前的应用程序中有效），但使用了Kendo。

您可以使用以下样式：

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

示例

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

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

示例

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

编辑

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

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

示例

这在chrome:中对我有效

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

但一般来说，我建议不要在模态中打开模态。您还需要对长方体阴影执行类似的操作。

http://jsfiddle.net/pjuv6uzx/

我有一个带有引导模式的Laravel-vue项目。我有一个模态，它的内容通过vue的if语句进行更改。无论如何，模态背景在dekstop或Android设备上没有问题。然而，在iOS上，当模态内部发生变化时，模态背景会闪烁，尽管它实际上并没有关闭或重新打开。背景覆盖"闪烁"，因为它变得更暗（不透明度降低），然后返回到正常的不透明度状态。这似乎已经解决了我的问题：

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

（所以添加：-webkit溢出滚动：auto；修复它）

相关文章：