JSFiddle - React, Tailwind, and code Playground

by Chris

HTML

<div class="popup-container">
  <button class="popup-trigger">Open Popup</button>
  <div class="popup-overlay">
    <div class="popup-content">
      This is your popup content.
    </div>
  </div>
</div>

CSS

.overlay-container {
  position: relative;
  width: 300px;
  height: 200px;
  background-color: #f0f0f0;
}

.overlay-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black overlay */
  opacity: 0;
  transition: opacity 0.3s ease;
}

.overlay-container:hover::before {
  opacity: 1;
}

JavaScript

document.querySelector('.popup-trigger').addEventListener('click', function() {
  document.querySelector('.popup-overlay').style.display = 'block';
});

document.querySelector('.popup-overlay').addEventListener('click', function(e) {
  if (e.target === this) {
    this.style.display = 'none';
  }
});