的jQuery的.css體混濁

我有一個新聞選項卡，其中每當用戶點擊它，在彈出框中顯示了細節，但是我想要的背景或身體標籤本身變暗，所以我寫道：的jQuery的.css體混濁

$("#read").click(function(){ 
    $("#pbox").fadeIn('slow'); 
    $("body").css({"opacity": "0.5"}); 
});

但是箱子本身變暗。有沒有辦法使框忽略這個命令？或者也許有另一種方式？

來源

2012-08-06 RnD

透明度將子元素繼承當您使用它這樣。你還嘗試了什麼？也許添加一個jsfiddle來顯示你已經嘗試過。 – phenomnomnominal 2012-08-06 10:09:09

由於正文包含#pbox，那麼該框本身將受到您應用的50％不透明度的約束。更好的方法是覆蓋在你的整個窗口半不透明格，然後位置#pbox它上面，就像個小這樣：

#overlay { 
    position: fixed; 
    top: 0; 
    left: 0; 
    background-color: #fff; 
    width: 100%; 
    height: 100%; 
    display: none; 
} 

#pbox { 
    z-index: 1; 
}

所以在這裏你必須在出現所有內容的白色#overlay DIV具有50％的不透明度。它上面是#pbox，指定z-index以確保它顯示在最上面。

jQuery代碼將是一個有點像這樣：

$("#read").click(function(){ 
    $("#pbox").fadeIn('slow'); 
    $("#overlay").show().css({"opacity": "0.5"}); 
});

來源

2012-08-06 10:08:03 Chris

正是我想要的，謝謝 – RnD 2012-08-06 10:15:05

不幸的是，沒有。由於彈出窗口位於body標籤內，因此它將包含在不透明度的更改中。

做到這一點的唯一方法是製作一個覆蓋整個身體且半透明的覆蓋圖層，然後將彈出窗口放在上面。

來源

2012-08-06 10:06:47 Purag

的jQuery的.css體混濁

回答

相關問題