(jquery) Blackout the entire screen and highlight a section of the page?

Question

As per screenshot below. I am pretty sure someone has done this before! =)

The circle is a bonus, would be very happy with a solution that allows highlighting of a g

Answer 1

I played off @mVChr's fiddle to highlight one box once a different button is clicked. I'm currently using this to highlight an entry field once a login button is clicked on a new site.

$('.expose').click(function(e){
    $('.lightbox').css('z-index','99999');
    $('#overlay').fadeIn(300);
});

$('#overlay').click(function(e){
    $('#overlay').fadeOut(300, function(){
        $('.expose').css('z-index','1');
    });
});

Modified example based on @mVChr's code

When clicked
This box lights up





.buttonbox {     
    cursor:pointer;
    float:left;
    color:#1792C7;
    border: 1px solid #1792C7; 
    padding:10px 16px;
    background-color:transparent;
    -webkit-transition: background linear .3s; 
    -moz-transition: background linear .3s; 
    -ms-transition: background linear .3s; 
    -o-transition: background linear .3s; 
    transition: background linear .3s; 
}

.buttonbox:hover { 
    text-decoration: none; 
    color: #fff; 
    background-color: #1792C7; 
}

.lightbox {     
    background:#fff;
    border:1px solid #0d0d0d;
    color: #0d0d0d;
    cursor:pointer;
    float:left;
    margin:0px 0px 0px 5px; 
    padding:10px 16px;
    text-align:center;
}

.expose {
    position:relative;
}

#overlay {
    background:rgba(0,0,0,0.5);
    display:none;
    width:100%; height:100%;
    position:absolute; top:0; left:0; z-index:99998;
}