JSFiddle - React, Tailwind, and code Playground

by ebiewener

HTML

<div class="blocker"></div>
<div>some content to block</div>
<div class="noBlock">don't block me!</div>
<div>more content to block</div>
<br><br>
<input type="button" value="block!"/>

CSS

body {background:green}
div {height:100px; background:red}
div.noBlock {width:200px; background:yellow; margin:0 auto 0 auto}
.blocker {background:black; opacity:0.5; position:absolute; top:0; left:0; width:100%; height:100%; display:none}

JavaScript

$('input').click(function(){
    
    var noBlock = $('.noBlock');
    var top = noBlock.position().top;
    var left = noBlock.position().left;
    noBlock.css({position:'absolute', top:top, left:left});
    $('.blocker').show();
});