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()