堆叠的 HTML 弹出窗口的可见性答案

【问题标题】：Visibility of stacked HTML popups堆叠的 HTML 弹出窗口的可见性
【发布时间】：2012-11-14 16:31:01
【问题描述】：

我正在开发一个 jQuery Backbone.js 网络应用程序。
我有一张带有表格条目的表格。表格背景为白色。
如果用户选择一个表格条目，则会显示一个模式弹出窗口。为了向用户显示弹出窗口现在处于模态模式，我曾经使用 jQuery UI 斜条纹（ui-widget-overlay）。

但我换了一个替代品。那些条纹对我来说太“引人注目”、“突兀”了。我现在将表格的不透明度更改为 0.5。我更喜欢这个。

现在的问题是我在弹出窗口中有弹出窗口。而且，如果我还更改了第一个弹出窗口的不透明度以向用户显示现在只有第二个弹出窗口在工作，则表格会通过第一个弹出窗口发光。

是否有任何可能性，任何替代方式让弹出窗口（一个 div）“变暗”，“变灰”到其外观的一半而不变得透明？

【问题讨论】：

不透明度的替代是什么意思？你可以有或没有不透明度。这就像要求替代文本。
btw：打开多个弹出窗口很可能会降低用户体验。也许您应该考虑另一种工作流程。

标签： javascript html css

【解决方案1】：

我会在 div 的顶部添加另一个 div，该 div 具有相同的尺寸，但背景为灰色，不透明度为 0.75。这应该工作得很好。

CSS

.inner {
  position: absolute;
}

.fade {
 background: grey;
 opacity: 0.75;
}

HTML

<div class="outer">
 <div class="inner">content</div>
 <div class="inner fade"></div>
</div>

这种方式在跨浏览器引用时非常安全。您还可以通过向淡入淡出类添加“id”属性来控制淡入淡出并使其消失。这样，您还可以使 div 处于非活动状态，因为它们的 div 内部淡入淡出在其之上。

【讨论】：

【解决方案2】：

尝试使用 hsla (look here)。

<style>
#el1 {
    background: red;
     width: 700px;
     height: 700px;
}

#el2 { 
     background-color: hsla(190, 30%, 94%, 0.6); 
     width: 500px;
     height: 500px;
}

#el3 { 
     background: green;
     width: 300px;
     height: 300px;
}
</style>

<div id="el1">
    <div id="el2">
        <div id="el3">

        </div>
    </div>
</div>

在我的代码中，el1 是持有者，根本不透明。然后，el2 作为第一个孩子使用 hsla 来提高透明度。包含的 el3 不再透明，这有效。

【讨论】：

【解决方案3】：

您可以在页面顶部放置一个玻璃窗格并适当设置 z-index，以便您的第二个弹出窗口位于其顶部，而其他所有内容都隐藏在其下方：

#pane {
    position: fixed;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    opacity:0.5;
    z-index: 999;
}

确保您的第二个弹出窗口的 z-index 高于窗格，这样就可以了。

【讨论】：