1

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

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

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

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

4

3 回答 3

1

尝试使用 hsla（看这里）。

<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 不再透明，这有效。

于 2012-11-14T16:38:29.637 回答
1

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

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>​

This way you are pretty safe when it comes to cross-browser references. Also you can control the fade by adding an "id" attribute to the fade class and make it go away. This way, you can also make div inactive, as they div inner fade is on top of it.

于 2012-11-14T16:39:00.387 回答
0

您可以在页面顶部放置一个玻璃窗格并适当地设置 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 高于窗格，并且您很好。

于 2012-11-14T16:38:10.020 回答