Unidadvirtual : Formulario Modal suscribirse a mi canal Youtube

El Formulario modal para suscribirse a mi canal de Youtube que aparece al cargar la pagina  es el archivo popup-suscribirse-canal-youtube.php ,  que es llamado en la parte final del archivo index.php 

contenido del archivo  popup-suscribirse-canal-youtube.php :

<!-- POPUP SUSCRIPCIÓN YOUTUBE -->
<div id="ytPopup" class="yt-popup">
  <div class="yt-popup-content">
    
    <span class="yt-close" onclick="closePopup()">&times;</span>
    
    <h2>¡Apóyame suscribiéndote a mi canal!</h2>
    <p>Tutoriales sobre Diseño Web</p>

    <!-- Botón YouTube -->
     <!--
      <a href="https://www.youtube.com/channel/TU_CANAL_ID?sub_confirmation=1" 
     https://www.youtube.com/@tutoriales-diseno-web?sub_confirmation=1 
     -->
    <div class="yt-btn-row">
          <a href="https://www.youtube.com/@tutoriales-diseno-web?sub_confirmation=1" 
             target="_blank" class="yt-btn" 
              onclick="closePopup()">
             Suscribirme a YouTube
          </a>
        
          <button class="yt-cancel-btn" onclick="closePopup()">Cancelar</button>
    </div>

  </div>
</div>

<style>
.yt-popup {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.6);
  justify-content: center;
  align-items: center;
}
.yt-popup-content {
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  text-align: center;
  width: 360px;
  position: relative;
  animation: ytfade 0.4s;
}
.yt-close {
  position: absolute;
  top: 10px; right: 15px;
  font-size: 22px;
  cursor: pointer;
}




.yt-btn-row {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 15px;
}

.yt-btn {
  background: red;
  color: white;
  padding: 10px 18px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@keyframes ytfade {
  from {transform: scale(0.8); opacity: 0;}
  to {transform: scale(1); opacity: 1;}
}


.yt-cancel-btn {
  background: #333;
  color: #fff;
  padding: 10px 18px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.yt-cancel-btn:hover {
  opacity: 0.8;
}

</style>

<script>
document.addEventListener("scroll", function() {
    // si ya salio el popup no se mostrara nuevamente
  if (localStorage.getItem("ytPopupClosed")) return;

  // Calcula % de scroll
  let scrollTop = window.scrollY;
  let docHeight = document.body.offsetHeight - window.innerHeight;
  let scrolled = (scrollTop / docHeight) * 100;

  if (scrolled > 25) { // ← Cambia el % si quieres (20, 30, 40...)
    document.getElementById("ytPopup").style.display = "flex";
    // Para que no se dispare muchas veces en el mismo scroll
    localStorage.setItem("ytPopupClosed", "true");
  }
});

function closePopup() {
  document.getElementById("ytPopup").style.display = "none";
  localStorage.setItem("ytPopupClosed", "true");
}
</script>

Agregar evento para que ESC también cierre el popup

// Cerrar popup con ESC
document.addEventListener("keydown", function(event) {
  if (event.key === "Escape") {
    closePopup();
  }
});

Descarga Conversacion ChatGPT

Enlace de la conversacion con ChatGPT con todo el codigo generado guardado en Mediafire

https://www.mediafire.com/file/8dnsrqol66sz7gl/Popup+suscripción+YouTube.pdf/file

Fuente chatGPT