JSFiddle - React, Tailwind, and code Playground

HTML

<div id="over">

</div>
<div id="box">
  Obsah boxu
</div>
<input type="submit">

CSS

#over{
  position: fixed;
  top: 0px;
  left: 0px;
  background-color: black;
  opacity: 0.5;
  display: none;
  width: 100px;
  height: 100px;
}
#box{
  background-color: yellow;
  font-size: 2em;
  font-weight: bold;
  border-radius: 10px;
  position: fixed;
  display: none;
}

JavaScript

$(document).ready(function(){
	$("input").click(function(){
  	$("#over").width(($(window).width()));
    $("#over").height(($(window).height()));
    $("#over").fadeIn(300);
    $("#box").css("margin",(($(window).height()-$("#box").height())/2));
    $("#box").fadeIn(300);
  });
  $("#over").click(function(){
  	$("#over, #box").fadeOut(300);
  });
});