Firefox就像检查元素一样

Question

我正在使用检查元素选项构建我的网站，以便像firebug一样分别检查每个元素。我喜欢构建类似Firefox的新版本的样式，它将模糊除了所选元素之外的所有元素。有关如何做到这一点的任何想法？下面给出了所需输出的例子。

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

Answer 1

放置背景颜色为黑色，100％宽度/高度，绝对定位和左/上0的div，以及介于0和1之间的不透明度（例如0.5）。这会让你“灰掉页面效果”。

然后，将您不希望变灰的文本放在DOM层次结构中较高的单独div中（或者在同一级别但具有更高的z-index），这样它就不会被掩盖由你的灰色div。

Answer 2

这样的事情：

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>

Answer 3

你可以使用jQuery叠加效果和一些CSS ..

点击此链接：http://tympanus.net/codrops/2009/12/03/css-and-jquery-tutorial-overlay-with-slide-out-box/