JSFiddle - React, Tailwind, and code Playground

HTML

<button id="button">
click
</button>

<div id="wrapper"></div>
<div id="modal">hey ho</div>

CSS

#wrapper, #modal {
  display: none;
}

#wrapper {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

#modal {
  position: fixed;
  left: 50%;
  transform: translate(-50%);
  z-index: 99;
  padding: 15px;
  background-color: white;
}

JavaScript

var button = document.getElementById('button');
var modal = document.getElementById('modal');
var wrapper = document.getElementById('wrapper');

button.onclick = function () {
	modal.style.display = 'block';
  wrapper.style.display = 'block';
}

wrapper.onclick = function () {
	modal.style.display = 'none';
  wrapper.style.display = 'none';
}