JSFiddle - React, Tailwind, and code Playground

HTML

1 : click the blue container to append the overlayDiv
<br>
2 : click the red container to remove the overlayDiv after 3 seconds
<br>
3 : click the green container in the 3 second window 


<div style="width:150px;height:150px;top: 0px;left: 0px;background-color:blue" onclick="appendOverlay()">
	</div>
	<div style="width:150px;height: 150px;top: 0px;left: 350px;background-color:green" onclick="alert('green click')">
	</div>

CSS

.loadmask {
    z-index: 100;
    position: absolute;
    top:0;
    left:0;
    -moz-opacity: 0.5;
    opacity: .50;
    width: 100%;
    height: 100%;
	background: rgba(0, 0, 0, 0.8);
}
.removeDiv{
    position:absolute;
    left:160px;
    top: 100px;
    height:150px;
    width:150px;
    background-color:red;
    opacity: 1;
}

JavaScript

function appendOverlay(){
    var maskDiv = $('<div id="overlay" class="loadmask" onclick:"return false;"><div class="removeDiv" onclick="sleep(3000)"><span>click to remove overlay after 3 seconds</span></div></div>');
		$('body').append(maskDiv);
	}

	function removeDiv(){
		$("#overlay").remove();
	}

	function sleep(milliseconds) {
	  var start = new Date().getTime();
	  for (var i = 0; i < 1e7; i++) {
		if ((new Date().getTime() - start) > milliseconds){
		  break;
		}
	  }
	  removeDiv();
	}