JSFiddle - React, Tailwind, and code Playground

by Paulpro

HTML

<div>This is a div with a bunch of text in it. Text Text Text Text Text TextText Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text <a href="">This is a link</a> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text <div id="innerdiv">This div has a little bit of text in it<a href="#"> and a link</a></div> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</div>

CSS

html, body{
    height: 100%
}

JavaScript

var o_color = '#8888AA';
var o_opacity = '0.5';

function overlay(){
    var a = arguments;
    console.log(a);
    if(typeof a[0] === "number" && typeof a[1] === "number" &&
      typeof a[2] === "number" && typeof a[3] === "number"){
        $('body').append($('<div id="o_top">').css({
            position: 'absolute',
            backgroundColor: o_color,
            opacity: o_opacity,
            top: '0',
            left: '0',
            width: $('body').innerWidth()+'px',
            height: a[1]+'px'
        }),$('<div id="o_left">').css({
            position: 'absolute',
            backgroundColor: o_color,
            opacity: o_opacity,
            top: a[1]+'px',
            left: '0',
            width: a[0]+'px',
            height: a[3]+'px'
        }),$('<div id="o_right">').css({
            position: 'absolute',
            backgroundColor: o_color,
            opacity: o_opacity,
            top: a[1]+'px',
            left: (a[0]+a[2])+'px',
            width: ($('body').innerWidth()-a[0]-a[2])+'px',
            height: a[3]+'px'
        }),$('<div id="o_bottom">').css({
            position: 'absolute',
            backgroundColor: o_color,
            opacity: o_opacity,
            top: (a[1]+a[3])+'px',
            left: '0',
            width: $('body').innerWidth()+'px',
            height: ($('body').innerHeight()-a[1]-a[3])+'px'
        }));
        
        var that = this;
        $(window).resize(function(){
            wait = setTimeout(function(){
            deleteOverlay();
            overlay.apply(that, a);
            },100);
        });
    }else{
        var $el = $(a[0]);
        if($el.innerWidth() && $el.innerHeight()){
            overlay($el.offset().left, $el.offset().top, $el.innerWidth(), $el.innerHeight());
        }
    }
}

function deleteOverlay(){
    $('#o_top, #o_left, #o_right, #o_bottom').remove();   
}
                         
overlay('#innerdiv');