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

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

威尔说得很清楚。您将注意到，对于每个新模式，背景覆盖变得更暗

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

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模式替换，并显示我期望的结果（在我当前的应用程序中工作），但使用剑道。

您可以使用以下样式：

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

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

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

css版本似乎是最好的，因为它允许你点击背景来关闭模态，而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 }

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

---

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

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

---

（因此添加：-webkit溢出滚动：自动；修复了它）

您需要背景还是完全删除它就可以了？我需要它。实际上，它应该是一个模态，但我需要。我的应用程序可以同时打开无限模式。顺便说一句，您的示例使模式内容有点不透明。谢谢。。事实上，我将混合使用@Pete和css提出的javascript版本，比如（至少添加4个窗口）。当然有一些错误，但这只是一个例子。我喜欢这两种方法。谢谢大家!@DontVoteMeDown发现css选择器存在问题，如果关闭一个模式并打开另一个模式，则它无法工作。如果您使用css，请参阅我的editNice，谢谢。我最终混合了js和css来获得类似的东西（添加5个窗口，你就会明白我的意思）。如果你想在关闭modals的同时保留你的背景，你可以这样做