JSFiddle - React, Tailwind, and code Playground

HTML

<body>
   <div class="flex">
     <p>Click anywhere in the document to add/remove the modal</p>
     <p>Resize the window so the modal is too tall, then try to scroll</p>
   </div>
   <div class="modal hidden">
     <div class="modal_content">
     </div>
   </div>
</body>

CSS

* {
  margin: 0;
  padding: 0;
}
body {
  height: 100%;
}
.flex {
  width: 100%;
  height: 100vh;
  background-color: #999999;
  
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.modal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  
  display: flex;
  justify-content: center;
}
.modal.hidden {
  display: none;
}
.modal_content {
  margin: auto 0;
  width: 100px;
  height: 300px;
  background-color: #999999;
  border: 3px solid red;
}

JavaScript

document.addEventListener('click', function() {
	const modal = document.querySelector('.modal');
  modal.classList.toggle('hidden');
});