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

Posted 2023-05-07

【中文标题】防止模态背景覆盖在每个打开的新模态上变暗

【英文标题】：Prevent modal background overlay to get darker on each new modal opened

【发布时间】：2015-05-22 16:15:49

【问题描述】：

对于每个新打开的模态，我如何防止模态的覆盖变暗？

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

但根本没有任何效果。

需要明确的是，我在我的应用程序中将 Kendo window 替换为 Bootstrap 模式，this fiddle 显示了我期望的确切结果（在我当前的应用程序中运行）但使用的是 Kendo。

【问题讨论】：

背景是需要还是完全去掉也可以？

我需要它。实际上，它应该作为一种模式工作。

【参考方案1】：

您可以使用以下样式：

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

Example

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

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

Example

css 版本似乎是最好的，因为它允许您单击背景关闭以关闭模式，而 js 版本没有

编辑

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

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

Example

【讨论】：

我喜欢这两种方法。谢谢！

@DontVoteMeDown 发现 css 选择器有问题，如果您关闭一个模式并打开另一个模式，它不起作用。如果您使用 css，请参阅我的编辑

很好，谢谢。我最终混合了 js 和 css 来得到类似this 的东西（添加 5 个窗口，你就会明白我的意思）。

如果你想在关闭模式的同时保留背景，你可以这样做jsfiddle.net/3rgyv9cn/12

【参考方案2】：

这在 chrome 中对我有用：

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

但通常我建议不要在模态中打开模态。您还需要对 box-shadow 执行类似的操作。

http://jsfiddle.net/pjuv6uzx/

【讨论】：

但我需要。我的应用程序可以同时打开无限模式。顺便说一句，您的示例使模态内容有点不透明。

谢谢.. 事实上，我会使用@Pete 和 css 提出的 javascript 版本的混合，比如this（至少添加 4 个窗口）。当然有一些错误，但这只是一个例子。

【参考方案3】：

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

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

（所以添加：-webkit-overflow-scrolling: auto; 修复它）