JSFiddle - React, Tailwind, and code Playground

HTML

<div id="darkness" class="darkness"></div>

<div id="popup-1" class="popup">
  <div>Popup-1</div>
  <button type="buttom" class="popup-close-btn">Закрыть</button>
</div>

<div id="popup-2" class="popup">
  <div>Popup-2</div>
  <button type="buttom" class="popup-close-btn">Закрыть</button>
</div>

<a href="#popup-1">Popup-1</a>
<a href="#popup-2">Popup-2</a>

CSS

.darkness {
  background-color: rgba(0,0,0,.8);
  bottom: 0;
  display: none;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 10000;
}

.popup {
  background-color: #fff;
  display: none;
  height: 100px;
  left: 50%;
  margin-left: -100px;
  margin-top: -50px;
  padding: 20px;
  position: fixed;
  text-align: center;
  top: 50%;
  width: 200px;
  z-index: 10001;
}

JavaScript

var darkness = document.getElementById('darkness');

document.querySelectorAll('a').forEach(function(item) {

	item.addEventListener('click', function(e) {
		var popup = document.getElementById(item.getAttribute('href').slice(1));
    
    e.preventDefault();
    
    console.log(darkness);
 
    popup.querySelector('.popup-close-btn').addEventListener('click', closePopupHandler);
  	popup.style.display = 'block';
    darkness.style.display = 'block';
  });
});

function closePopupHandler() {
	darkness.style.display = 'none';
  this.parentNode.style.display = 'none';
  this.removeEventListener('click', closePopupHandler);
}