2012-07-12 124 views
0

我正在建設我的網站與檢查元素選項檢查每個元素分開像螢火蟲。我喜歡構建像新版Firefox的樣式,它會模糊除選定元素之外的所有元素。任何想法如何做到這一點?下面給出了所需輸出的例子。Firefox像檢查元素

編輯:請注意,在這裏我需要選擇的元素可能有比其他元素更低的DOM層次結構。例如。我可能需要灰色的身體容器,如果我選擇一些不應該有灰色效果的內部元素。

enter image description here

回答

1

事情是這樣的:

http://jsfiddle.net/lollero/T7PyK/

點擊任何元素將顯示覆蓋和隔離元素。 單擊重疊將撤消。

JS:

$('*').on("click", function(e) { 

    e.stopPropagation(); 

    var self = $(this), 
     overlay = $('#overlay'); 

    if (!self.hasClass('active')) { 

     if (self.is(':not(#overlay)')) { 
      self.addClass('active'); 
     } 
     overlay.fadeTo(400, 0.7); 

    } 
    if (self.hasClass('active')) { 

     overlay.on("click", function() { 
      overlay.fadeOut(400, function() { 
       self.removeClass('active'); 
       }); 
     }); 

    } 

}); 
​ 

CSS:

#overlay { 
    display: none; 
    background: #000; 
    position: fixed; 
    z-index: 100; 
    top: 0px; 
    right: 0px; 
    bottom: 0px; 
    left: 0px; 
} 

.active { 
    position: relative !important; 
    z-index: 101 !important; 
    background: #fff; 
    box-shadow: 0px 0px 50px #111; 
} 
​ 

HTML:

<div id="overlay"></div> 
+0

很好的回答Joonas。有用! – Stranger 2012-07-13 11:56:05

+0

@Udhay我想指出一些事情。點擊後,該元素會被賦予白色背景,如果父元素具有不同的顏色,則可能不需要該元素。你會看到它是如何看起來如果你點擊綠色區域內的任何單獨的元素,如粗體文字http://jsfiddle.net/lollero/T7PyK/1/ – Joonas 2012-07-13 12:01:02

1

把一個div與黑色,100%的寬度/高度,絕對定位的背景顏色和左/ 0頂部,以及介於0和1(例如0.5)的不透明度。這給你「灰色的頁面效果」。

然後,將您不希望變灰的文本放在DOM層次結構中更高的單獨div中(或者在同一級別但具有更高的z-index),以便它不會被覆蓋通過你的灰色分區。

+0

只是嘗試這樣回答這個問題: 1. 100%的高度並不意味着灌裝整個父容器 - 這是特定於瀏覽器的。 2.較高的Z指數方法不適用於它。理論上講,這是有道理的,但我無法得到這個工作。 – 2012-07-12 18:41:27

+1

@Hope I Helped,1.實際上,對於絕對定位的元素,它通常意味着填充整個窗口(而不是父容器)。如果你沒有看到,也許你應該在代碼中發佈SO?或者,您可以始終使用JS來計算窗口高度並明確設置它,但實際上並不需要。 Z指數很容易被誤解。它只在兩個元素重疊時處於DOM層次結構的相同級別。如果您有DIV的A和B,並且BODY> A> B B的DOM將總是重疊A,而不管它們的z索引是什麼。 – machineghost 2012-07-12 18:45:08

+0

但是在這裏,我需要應用DOM層次較低的不透明度。那麼無論如何要做到這一點? – Stranger 2012-07-13 11:02:47