Skip to content

Instantly share code, notes, and snippets.

@LeonFedotov
Last active January 4, 2016 02:09
Show Gist options
  • Save LeonFedotov/8552736 to your computer and use it in GitHub Desktop.
Save LeonFedotov/8552736 to your computer and use it in GitHub Desktop.
This adds an overlay mask around any given element!
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');
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment