Posted January 2018

Quick jQuery Overlay

Sometimes I have a need to overlay an image over top of an existing website. And very often jQuery is available. And so, here's a little chunk of code that creates an overlay. Might not be useful to you but I end up using it often enough I want it posted somewhere.

Add these in Developer Tools or whatever way you can get to a console for the browser you're developing in.

So.

The Code

jQuery('<div />', {
	id: 'my-overlay',
	css: {
		'width': '100%',
		'height': '100%',
		'background-image': 'url(https://via.placeholder.com/600x450/ff000/ffffff)',
		'background-repeat': 'no-repeat',
		'background-position': 'top center',
		'top': '0',
		'left': '0',
		'cursor': 'all-scroll',
		'position': 'fixed',
		'opacity': '0.5',
		'z-index': '99999'
	}
}).appendTo('body');

Code to remove the overlay

jQuery('#my-overlay').remove()