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

See example of the following here →

No need for a plugin. This can be accomplished with very little jQuery code, showing a blackout overlay with the selected div at a z-index above it:

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

According to the following HTML & CSS... just add the expose class to any element you want isolated on click:

<div class="expose">Some content</div><textarea class="expose">Some content</textarea><br /><input type="text" class="expose" value="Some content" /><br /><div id="overlay"></div>.expose {    position:relative;}#overlay {    background:rgba(0,0,0,0.3);    display:none;    width:100%; height:100%;    position:absolute; top:0; left:0; z-index:99998;}

See example →

What about using the outline CSS property?

input[type="search"] {    -webkit-appearance: textfield;    background:url('icons.png') #fff no-repeat 5px -601px;    padding:0 10px 0 32px!important;    width:168px;    outline: 0px rgba(0,0,0,0) solid;    transition: outline-color .3s}input[type="search"]:focus{    z-index:1000;    position:relative;    border:1px solid #f60;    outline: 5000px rgba(0,0,0,.8) solid ;}

this applies a very large outline on focused inputs with fade transition.

Example:

Look at jQuery Tool's Expose plugin. That's probably what you want.