December 2024. Original from January 2018

Quick Overlay

Formerly known as Quick jQuery Overlay.

Why?

From 2018:

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.

Create your own overlay with a backgroundImage of your own along with a background size and you can paste it into developer tools when you're doing development. Adjust the opacity to your liking.

jQuery is no longer required.

Source

(function (){if (document.getElementById('my-overlay')) {
    document.getElementById('my-overlay').remove();
} else {
    let div = document.createElement('div');
    div.id = 'my-overlay';
    div.style.width = '100%';
    div.style.height = '100%';
    // adjust this with your own image, perhaps 'url(https://example.com/image.jpg)'
    div.style.backgroundImage = 'conic-gradient(from 45deg,#ff0000 25%,#ffffff,pink 0 50%,#00ff00 0 75%,#0000ff 0)';
    // size this with the dimensions (and units) of your image
    div.style.backgroundSize = '600px 450px';
    div.style.backgroundRepeat = 'no-repeat';
    div.style.backgroundColor = 'rgba(0,0,0,0.2)';
    div.style.backgroundPosition = '50% 50%';
    div.style.position = 'fixed';
    div.style.opacity = '0.5';
    div.style.zIndex = '99999';
    div.style.cursor = 'all-scroll';
    div.style.top = '0';
    div.style.left = '0';
    div.style.pointerEvents = 'none';
    // Optionally, some text
    div.innerText = 'FPO';
    div.style.display = 'flex';
    div.style.justifyContent = 'center';
    div.style.alignItems = 'center';
    // impact color white
    div.style.color = 'white';
    div.style.fontFamily = 'sans-serif';
    div.style.fontSize = '8rem';
    div.style.fontWeight = 'bold';
    // user select none
    div.style.userSelect = 'none';
    div.style['-webkit-user-select'] = 'none';
    document.body.appendChild(div);
}})();

Source (compressed)

javascript:%28function%28%29%7Bif%28document.getElementById%28%27my-overlay%27%29%29%7Bdocument.getElementById%28%27my-overlay%27%29.remove%28%29%3B%7Delse%7Blet%20div%3Ddocument.createElement%28%27div%27%29%3Bdiv.id%3D%27my-overlay%27%3Bdiv.style.width%3D%27100%25%27%3Bdiv.style.height%3D%27100%25%27%3Bdiv.style.backgroundImage%3D%27conic-gradient%28from%2045deg%2C%23ff0000%2025%25%2C%23ffffff%2Cpink%200%2050%25%2C%2300ff00%200%2075%25%2C%230000ff%200%29%27%3Bdiv.style.backgroundSize%3D%27600px%20450px%27%3Bdiv.style.backgroundRepeat%3D%27no-repeat%27%3Bdiv.style.backgroundColor%3D%27rgba%280%2C0%2C0%2C0.2%29%27%3Bdiv.style.backgroundPosition%3D%2750%25%2050%25%27%3Bdiv.style.position%3D%27fixed%27%3Bdiv.style.opacity%3D%270.5%27%3Bdiv.style.zIndex%3D%2799999%27%3Bdiv.style.cursor%3D%27all-scroll%27%3Bdiv.style.top%3D%270%27%3Bdiv.style.left%3D%270%27%3Bdiv.style.pointerEvents%3D%27none%27%3Bdiv.innerText%3D%27FPO%27%3Bdiv.style.display%3D%27flex%27%3Bdiv.style.justifyContent%3D%27center%27%3Bdiv.style.alignItems%3D%27center%27%3Bdiv.style.color%3D%27white%27%3Bdiv.style.fontFamily%3D%27sans-serif%27%3Bdiv.style.fontSize%3D%278rem%27%3Bdiv.style.fontWeight%3D%27bold%27%3Bdiv.style.userSelect%3D%27none%27%3Bdiv.style%5B%27-webkit-user-select%27%5D%3D%27none%27%3Bdocument.body.appendChild%28div%29%3B%7D%7D%29%28%29%3B