堆疊式HTML彈出窗口的可見性

我正在開發一個jQuery Backbone.js web應用程序。
我有一個表格條目表。桌子有白色背景。
如果用戶選擇一個表項，則會顯示一個模式彈出窗口。爲了向用戶顯示彈出窗口現在處於模態模式，我曾經使用jQuery UI對角線條紋（ui-widget-overlay）。堆疊式HTML彈出窗口的可見性

但我改變了一個選擇。那些條紋對我來說太「引人注目」，「突兀」。我現在將表格的不透明度更改爲0.5。我更喜歡這個。

現在的問題是，我彈出窗口中彈出。如果我還改變了第一個彈出窗口的不透明度，以顯示用戶現在只有第二個彈出窗口在工作，那麼表格就會通過第一個彈出窗口顯示出來。

是否有任何可能性，任何其他方式有一個彈出窗口（一個div）「暗淡」，「灰色」的一半外觀沒有變得透明？

來源

2012-11-14 Wolfgang Adamec

你的代碼在哪裏？ –

你的意思是不透明的替代方案？你可以有不透明或不透明。這就像要求文本的替代方案。 –

順便說一句：打開多個彈出窗口很可能會降低用戶體驗。也許你應該考慮另一種工作流程。 – Makkes

我會添加另一個div在具有相同尺寸但具有不透明度爲0.75的灰色背景色的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>

這樣，你是相當安全的，當涉及到跨瀏覽器的引用。你也可以通過在漸變類中添加一個「id」屬性來控制漸變，並使其消失。這樣，你也可以使div無效，因爲div內部淡入淡出。

來源

2012-11-14 16:39:00 toxicate20

你可以躺在你的頁面的頂部玻璃嵌板，並設置適當的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-14 16:38:10 Makkes

試用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不再透明，這是有效的。

來源

2012-11-14 16:38:29

堆疊式HTML彈出窗口的可見性

回答

相關問題