Firefox像检查元素

我正在建设我的网站与检查元素选项检查每个元素分开像萤火虫。我喜欢构建像新版Firefox的样式，它会模糊除选定元素之外的所有元素。任何想法如何做到这一点？下面给出了所需输出的例子。Firefox像检查元素

编辑：请注意，在这里我需要选择的元素可能有比其他元素更低的DOM层次结构。例如。我可能需要灰色的身体容器，如果我选择一些不应该有灰色效果的内部元素。

enter image description here

来源

2012-07-12 Stranger

事情是这样的：

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>

来源

2012-07-13 11:45:14 Joonas

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

@Udhay我想指出一些事情。点击后，该元素会被赋予白色背景，如果父元素具有不同的颜色，则可能不需要该元素。你会看到它是如何看起来如果你点击绿色区域内的任何单独的元素，如粗体文字http://jsfiddle.net/lollero/T7PyK/1/ – Joonas 2012-07-13 12:01:02

把一个div与黑色，100％的宽度/高度，绝对定位的背景颜色和左/ 0顶部，以及介于0和1（例如0.5）的不透明度。这给你“灰色的页面效果”。

然后，将您不希望变灰的文本放在DOM层次结构中更高的单独div中（或者在同一级别但具有更高的z-index），以便它不会被覆盖通过你的灰色分区。

来源

2012-07-12 18:39:22 machineghost

只是尝试这样回答这个问题： 1. 100％的高度并不意味着灌装整个父容器 - 这是特定于浏览器的。 2.较高的Z指数方法不适用于它。理论上讲，这是有道理的，但我无法得到这个工作。 – 2012-07-12 18:41:27

@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

但是在这里，我需要应用DOM层次较低的不透明度。那么无论如何要做到这一点？ – Stranger 2012-07-13 11:02:47

您可以使用一些CSS沿jQuery的叠加效果..

打这个链接：http://tympanus.net/codrops/2009/12/03/css-and-jquery-tutorial-overlay-with-slide-out-box/

来源

2012-07-12 18:56:17 mkbsc

Firefox像检查元素

回答

相关问题