Question

I am building my website with inspecting elements option to inspect each elements separately like firebug. I like to built the styles like newer version of Firefox which will blur all the elements except the selected element. Any idea on how to do this? The example of the needed output is given below.

EDIT : Please note that, here the element i need to select may have lower DOM hierarchy than the other elements. For eg. i may need to gray out the body container and if i select some internal elements which should not have the grey effect.

Answer 1

Something like this:

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

Clicking any element will show overlay and isolate the element.
Clicking overlay will undo that.

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>