This adds an overlay mask around any given element!

gistfile1.js

var surroundWithOverlay = function(target) {

	var $t      = $(target),
		offsets = $t.offset(),
		height  = $t.height(),
		width   = $t.width(), 
		clearUs = function() { $('.overlayDivs').remove(); };

	$('<div class="overlayDivs">').css({
		/*
		 ______________
		|       *      |
		|______________|
		|    |  t |    |
		|____|____|____|
		|              |
		|______________|
		*/
		'z-index'    : 999999,
		'opacity'    : 0.5,
		'position'   : 'absolute',
		'background' : 'black',
		'top'        : 0,
		'left'       : 0,
		'right'      : 0,
		'height'     : offsets.top
	}).click(clearUs).appendTo('body');

	$('<div class="overlayDivs">').css({
		/*
		 ______________
		|              |
		|______________|
		|  * |  t |    |
		|____|____|____|
		|              |
		|______________|
		*/
		'z-index'    : 999999,
		'opacity'    : 0.5,
		'position'   : 'absolute',
		'background' : 'black',
		'top'        : offsets.top,
		'left'       : 0,
		'height'     : height,
		'width'      : offsets.left,
	}).click(clearUs).appendTo('body');

	$('<div class="overlayDivs">').css({
		/*
		 ______________
		|              |
		|______________|
		|    |  t | *  |
		|____|____|____|
		|              |
		|______________|
		*/
		'z-index'    : 999999,
		'opacity'    : 0.5,
		'position'   : 'absolute',
		'background' : 'black',
		'top'        : offsets.top,
		'left'       : offsets.left+width,
		'height'     : height,
		'right'      : 0
	}).click(clearUs).appendTo('body');

	$('<div class="overlayDivs">').css({
		/*
		 ______________
		|              |
		|______________|
		|    |  t |    |
		|____|____|____|
		|       *      |
		|______________|
		*/
		'z-index'    : 999999,
		'opacity'    : 0.5,
		'position'   : 'absolute',
		'background' : 'black',
		'top'        : offsets.top+height,
		'left'       : 0,
		'height'     : '100%',
		'right'      : 0
	}).click(clearUs).appendTo('body');
};