Question

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

但我改变了另一种选择。这些条纹对我来说太“惊人”，“突兀”。我现在将表的不透明度更改为0.5。我更喜欢这个。

现在的问题是我在弹出窗口中有弹出窗口。如果我还改变第一个弹出窗口的不透明度以向用户显示现在只有第二个弹出窗口正在工作，那么该表将在第一个弹出窗口中闪烁。

有没有任何可能性，有一种方法可以让弹出窗口（div）“暗淡”，“灰显”到它的一半外观而不透明？

Answer 1

尝试使用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再次不透明，这是有效的。

Answer 2

我会在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处于非活动状态，因为它们内部淡入淡出就在它之上。

Answer 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高于窗格，你没事。

堆叠HTML弹出窗口的可见性

3 个答案: