#popupOverlay {
  /* Se hace invisible por defecto */
  display: none; 
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  /* Opcional: Para centrar el contenido */
  display: flex;
  justify-content: center;
  align-items: center;
}

#popupContent {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
}

#popupContent img {
  max-width: 100%;
  height: auto;
}

#cerrarPopup {
  margin-top: 15px;
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
3. Comportamiento JavaScript (mostrar al cargar)
Este script muestra el pop-up cuando la página carga. 
javascript
<script>
  window.onload = function() {
    var overlay = document.getElementById("popupOverlay");
    var closeButton = document.getElementById("cerrarPopup");

    // Muestra el pop-up
    overlay.style.display = "block";

    // Opcional: Cierra el pop-up al hacer clic en el botón
    closeButton.onclick = function() {
      overlay.style.display = "none";
    };

    // Opcional: Cierra el pop-up si se hace clic fuera del contenido
    window.onclick = function(event) {
      if (event.target == overlay) {
        overlay.style.display = "none";
      }
    };
  };
</script>