Volver a inicio

Popup Component

Componente web personalizado para crear ventanas emergentes (popups) con animaciones fluidas, contenido dinámico y capacidad para mostrar diferentes tipos de contenido como texto, imágenes y videos.

Versatilidad
Animaciones
Personalizable

Ejemplos de uso

Popup básico con contenido de texto

Términos y Condiciones

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor quam vitae erat facilisis, nec convallis tellus posuere. Aenean imperdiet ligula id tellus cursus, at faucibus justo rhoncus.

Sed viverra felis at est semper, nec cursus metus interdum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec eleifend libero ac risus efficitur, vel aliquet velit vestibulum.

Curabitur sagittis, turpis vel placerat facilisis, erat magna luctus dui, ut bibendum est magna nec risus. Aliquam erat volutpat. Fusce semper urna at tellus accumsan, eu vulputate lorem pharetra.

Código HTML

<!-- Importar el componente -->
<script src="popup-component/index.js"></script>
<link rel="stylesheet" href="popup-component/index.css">

<!-- Implementación básica -->
<popup-component data-content-type="normal">
  <div class="popup-component-button-wrapper">
    <button class="popup-component-button" data-popup-button-open>
      Ver términos y condiciones
    </button>
  </div>

  <div class="popup-component" data-popup>
    <div class="popup-component-mask" data-popup-mask></div>

    <div class="popup-component-content">
      <h2>Términos y Condiciones</h2>
      <div class="popup-content-text">
        <p>Lorem ipsum dolor sit amet...</p>
        <!-- Más contenido aquí -->
      </div>
      
      <div class="popup-component-icon-close-wrapper" 
           data-popup-button-close>
        <svg>...</svg>
      </div>
    </div>
  </div>
</popup-component>

JavaScript

// Abrir el popup mediante JavaScript
const popup = document.querySelector('popup-component');
document.getElementById('open-popup').addEventListener('click', () => {
  popup.openPopup();
});

Popup con video de YouTube

Este ejemplo incluye un video de YouTube que se pausa automáticamente cuando se cierra el popup.

Código HTML

<popup-component data-content-type="video">
  <div class="popup-component-button-wrapper">
    <button class="popup-component-button" data-popup-button-open>
      Ver video
    </button>
  </div>

  <div class="popup-component" data-popup>
    <div class="popup-component-mask" data-popup-mask></div>

    <div class="popup-component-content">
      <!-- Video de YouTube (con enablejsapi=1 para control) -->
      <iframe 
        width="560" 
        height="315" 
        src="https://www.youtube.com/embed/VIDEO_ID?enablejsapi=1" 
        title="YouTube video player" 
        frameborder="0" 
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; 
              gyroscope; picture-in-picture" 
        allowfullscreen>
      </iframe>
      
      <div class="popup-component-icon-close-wrapper" 
           data-popup-button-close>
        <svg>...</svg>
      </div>
    </div>
  </div>
</popup-component>

Atributos

<!-- El atributo data-content-type="video" es importante para
     que el componente pause automáticamente los videos
     cuando se cierra el popup -->

Popup para mostrar imagen ampliada

Miniatura de la imagen
Imagen ampliada

Haz clic en la imagen para verla ampliada. Este patrón es útil para galerías de imágenes o tiendas online.

Código HTML

<popup-component data-content-type="normal">
  <div class="popup-component-button-wrapper">
    <div class="popup-component-image-button" data-popup-button-open>
      <img src="imagen-miniatura.jpg" alt="Miniatura de la imagen" 
           width="200" height="150">
    </div>
  </div>

  <div class="popup-component" data-popup>
    <div class="popup-component-mask" data-popup-mask></div>

    <div class="popup-component-content">
      <img src="imagen-grande.jpg" alt="Imagen ampliada">
      
      <div class="popup-component-icon-close-wrapper" 
           data-popup-button-close>
        <svg>...</svg>
      </div>
    </div>
  </div>
</popup-component>

CSS

.popup-component-image-button {
  display: inline-block;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.popup-component-image-button:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

Popup con estilo oscuro personalizado

Popup con Modo Oscuro

Este es un ejemplo de popup con un estilo oscuro personalizado, ideal para interfaces con tema oscuro o para contenido que se ve mejor sobre fondos oscuros.

Puedes personalizar cualquier aspecto del popup utilizando variables CSS y clases personalizadas.

HTML

<div class="popup-component-content popup-component-dark">
  <h3>Popup con Modo Oscuro</h3>
  <p>Este es un ejemplo de popup con un estilo oscuro...</p>
  
  <div class="popup-component-icon-close-wrapper" 
       data-popup-button-close>
    <svg>...</svg>
  </div>
</div>

CSS

.popup-component-dark {
  background-color: #252525;
  color: #e0e0e0;
  border: 1px solid rgba(33, 150, 243, 0.3);
}

.popup-component-dark .popup-component-icon-close-wrapper {
  color: #64b5f6;
}

.popup-component-dark .popup-component-icon-close-wrapper:hover {
  color: white;
}

Variables CSS

.popup-component-content {
  --popup-content-max-width: 600px;
  --popup-content-padding: 25px;
  --popup-content-border-radius: 8px;
  --button-close-top: 15px;
  --button-close-right: 15px;
  --button-close-size-icon: 20px;
  --button-close-asset-color: #64b5f6;
  --button-close-asset-color-hover: white;
}
Ver documentación completa