使用jQuery創建疊加，但內容繼承CSS不透明

我創建了一種模式疊加，然後與疊加內容..模式疊加有不透明度設置，它的工作原理，但疊加層的內容也有不透明度..我認爲它繼承它...我真的不希望一個新的類應用的內容，有沒有辦法才說出適用於使用jQuery創建疊加，但內容繼承CSS不透明

這裏是我的CSS

.modal-overlay { 
    position: fixed; 
    z-index:100; 
    top: 0px; 
    left: 0px; 
    height: 100%; 
    width: 100%; 
    background: #000000; 
    display: none; 
}

和我的jQuery來創建模型和內容

var overlayLayer = $("<div id='office-location'></div>").addClass('modal-overlay'); //THIS HAS THE OVERLAY CLASS OF CSS - SO IT SHOULD HAVE A OPACITY SET AND IT DOES 

$('body').append(overlayLayer); 

$('<div id="content-for-overlay" style="background-color: white;"></div>').appendTo(overlayLayer); /// CONTENT IS ALSO HAS OPACITY BUT ITS WRONG 

this.render({ to: "content-for-overlay", partial: "office-location-modal" });// THIS Sends a content from one file to my ID content-for-overlay... Its standard html 

$("body").css("overflow", "hidden"); 
$('#office-location').css("opacity", 0.8).fadeIn(150); 
$('#content-for-overlay').css("opacity", 1);

來源

2009-06-08 mark smith

CSS「opacity」屬性沒有被繼承，雖然看起來如此。

由於內容是在之內，覆蓋不透明度最好是父層（覆蓋層）。所以，如果家長的不透明度爲0.5，那麼在視覺上，其所有孩子只能達到不透明度（不高於）。

爲了避免這種情況，元素必須在HTML中分開。我知道這是一個痛苦，我認爲CSS應該有一些處理這個問題的方法，但不幸的是它沒有。

另一種與嵌套元素一起工作的方法是忘記不透明屬性，而是使用具有alpha透明度的PNG圖像並將其設置爲疊加層的背景。

來源

2009-06-08 16:15:06 James

如果我在讀你的問題吧，這只是一種方式不透明的後果作品現在：子元素繼承不透明度爲範圍，以他們不透明度值是標準化對父母，類似於如何高度/寬度可以工作。所以對孩子的「1」值實際上意味着「0.8的100％」。如果你在那裏精神領先，那也沒有辦法達到110％。

對此的解決方案並不漂亮，但最實用的方法是用背景兄弟（這樣不透明是其他問題的完全關注）來處理這個問題 - 對於語義來說不是很好，但是有效 - 或者第二種方法是使用PNG來做你的透明度，但這是受到遺留IE問題的影響。

很多關於這個網絡的討論很好，我保留this one書籤。

來源

2009-06-08 16:16:50 annakata

我想你比我更好地解釋了不透明的概念。 +1 – James 2009-06-08 16:17:56

您的內容不應該是疊加層的一部分。覆蓋是爲了防止訪問正常的內容，而不是容納模態內容。

而不是將您的內容附加到覆蓋div，將其附加到它的父母和樣式，以便它出現在你想要的位置。

另外，jQuery UI有一個可用於模態的Dialog小部件。

來源

2009-06-08 16:22:44 Tyler

這是寫在jQuery的1.3以下JS：

$(document).ready(function() { 
     $(document.body).prepend('<div class="modalOverLay"></div>'); 
     $('.modalOverLay').css({ opacity: 0.5, width: '100%', height: '100%' }); 
     $('#trigger').click(function() { 
      $('.modalOverLay').fadeIn('slow'); 
      $('.contentBox').css({ 
       position: 'absolute', 
       left: ($(document).width() - $('.contentBox').width())/2, 
       top: ($(document).height() - $('.contentBox').height())/2 
      }); 
      $('.contentBox').fadeIn(500); 

     }); 
    });

和下面的標記：

<a href="#" id="trigger">Trigger Modal pop up</a> 
<div class="contentBox"> 
    <p>I am on overlay but don't have the same opacity</p> 
</div>

這樣你的內容將不會有相同的不透明度爲您的覆蓋模式和座椅很好地處於我們所看到的有時太多的中間！ :)

來源

2009-06-08 21:36:54 Ali

好貼子。我一直在思考這個很長一段時間，以超過mootls性感警報框的功能。阿里的職位是完美的工作，但後來我必須添加teh z索引屬性，使我的div顯示在覆蓋。只是一個較低的zindex爲over lay和一個higner zindex爲我的div制定出來的。謝謝。

來源

2009-10-24 12:26:49

使用jQuery創建疊加，但內容繼承CSS不透明

回答

相關問題