Simple Popup Blocks
Convierte cualquier bloque, vista, formulario o elemento CSS personalizado de Drupal en popups configurables con amplias opciones de control de visualización.
simple_popup_blocks
Install
composer require 'drupal/simple_popup_blocks:8.x-3.5'
Overview
Simple Popup Blocks es un módulo versátil de Drupal que transforma cualquier contenido de bloque, vista, formulario o elemento HTML personalizado en popups completamente personalizables. El módulo proporciona una interfaz de configuración completa donde los administradores pueden definir el comportamiento del popup incluyendo posicionamiento, frecuencia de visualización, métodos de activación y controles visuales.
El módulo admite tanto bloques de Drupal (seleccionados desde un menú desplegable) como selectores CSS personalizados (id o clase) como fuentes de popup. Ofrece 10 posiciones de diseño diferentes (esquinas, centro y barras de ancho/alto completo), tres métodos de activación (automático, clic manual y detección de cierre de navegador/pestaña), y control sofisticado de frecuencia de visualización mediante conteo de visitas o intervalos basados en tiempo.
Cada popup puede configurarse individualmente con botones de minimizar y cerrar, soporte de tecla ESC, fondos de superposición, retrasos configurables, anchos de activación responsive y dimensiones personalizables. El módulo utiliza cookies para rastrear las interacciones de los visitantes y controlar la frecuencia de visualización del popup. Los selectores CSS se generan automáticamente para cada popup para permitir estilos personalizados.
Features
- Transforma cualquier bloque de Drupal en un popup seleccionándolo de los bloques disponibles
- Crea popups desde selectores CSS personalizados (id o clase) para vistas, formularios o cualquier elemento HTML
- 10 posiciones de diseño: Superior Izquierda, Superior Derecha, Inferior Izquierda, Inferior Derecha, Centro, Centro Superior, Barra Superior, Barra Inferior, Barra Izquierda, Barra Derecha
- Control de visualización basado en conteo de visitas con selección múltiple (mostrar en 1ª visita, 2ª visita, visitas específicas o cada visita)
- Control de frecuencia basado en tiempo con intervalos Por Hora, Diario o Semanal
- Tres métodos de activación: Automático (con retraso opcional), Manual (evento de clic en elemento especificado), Antes de cerrar navegador/pestaña (intención de salida)
- Botones configurables de minimizar, cerrar y minimizado con opciones de mostrar/ocultar
- Soporte de tecla ESC para cerrar popups
- Opción de fondo de superposición semitransparente
- Retraso configurable antes de la visualización automática del popup (en segundos)
- Configuración de ancho de activación responsive para controlar la visualización del popup según el ancho del viewport
- Ancho de popup personalizable en píxeles
- Configuración de expiración de cookies (0 para cookies de sesión, o días especificados)
- Tabla de referencia de selectores CSS proporcionada después de la creación del popup para estilos personalizados
- Oculta automáticamente los popups en páginas de administración
Use Cases
Popup de Suscripción al Newsletter
Crea un bloque que contenga un formulario de suscripción al newsletter usando el módulo Webform. Coloca el bloque en una región en la parte inferior de tu página. Ve a Add simple popup blocks, selecciona el bloque del menú desplegable, elige el diseño 'Center', establece el método de activación en 'Automatic' con un retraso de 5 segundos. Habilita la superposición y el botón de cerrar. Establece el conteo de visitas en '1' para mostrar solo en la primera visita. Esto crea un modal centrado que aparece una vez a los nuevos visitantes, invitándolos a suscribirse.
Banner de Consentimiento de Cookies
Crea un bloque personalizado con tu texto de política de cookies y botón de aceptar. Colócalo en una región. Crea un popup seleccionando este bloque, elige el diseño 'Bottom bar' para abarcar todo el ancho en la parte inferior de la página. Establece el conteo de visitas en '0' para mostrar en cada visita (o usa la frecuencia por tiempo configurada en 'Weekly'). Deshabilita la superposición ya que es un banner no intrusivo. Añade CSS personalizado usando los selectores proporcionados para estilizar el banner según el diseño de tu sitio.
Oferta de Intención de Salida
Crea un bloque promocional con una oferta especial o código de descuento. Crea un popup usando el método de activación 'Before browser/tab close' con diseño 'Center' y superposición habilitada. Establece el conteo de visitas en '1,2,3' para mostrar en las primeras tres visitas. Esto crea un popup de intención de salida que aparece cuando los usuarios mueven su mouse hacia el botón de cerrar del navegador, potencialmente convirtiendo a los visitantes que abandonan.
Modal de Clic para Abrir
Añade un div personalizado con id 'contact-modal' conteniendo un formulario de contacto en cualquier lugar de tu plantilla. Crea un popup con tipo 'Custom css id or class', ingresa 'contact-modal' como selector, selecciona 'Css id' como tipo de selector CSS. Establece el método de activación en 'Manual' e ingresa '#contact-trigger' como selector de activación. Añade un botón o enlace con id='contact-trigger' en cualquier lugar de tu página. Al hacer clic en este elemento se abrirá el formulario de contacto en un popup centrado.
Promoción Solo para Móviles
Crea un bloque promocional para descarga de app o contenido específico para móviles. Al configurar el popup, establece el 'Trigger width' en '768' píxeles. El popup solo aparecerá en dispositivos con ancho de viewport de 768px o mayor. Para popups solo en móviles, necesitarías JavaScript personalizado para invertir esta lógica, pero puedes usar los selectores CSS proporcionados para ocultar el popup en escritorio usando media queries.
Anuncio Temporizado con Minimizar
Crea un bloque de anuncio para actualizaciones importantes del sitio. Configura el popup con diseño 'Top right', habilita el botón de minimizar y establece un retraso de 10 segundos. Habilita 'Show minimized button when popup is not automatically triggered' para que los usuarios puedan acceder nuevamente al anuncio. Establece la frecuencia de tiempo en 'Daily' para que los visitantes recurrentes lo vean una vez al día. Los usuarios pueden minimizar el popup y hacer clic en el indicador minimizado para leerlo de nuevo.
Tips
- Coloca los bloques fuente del popup en una región en la parte inferior de la plantilla de tu página para mejores resultados - esto asegura que el elemento esté disponible cuando JavaScript se ejecute
- Siempre añade la regla CSS recomendada 'display: none' a tu theme para elementos de popup para prevenir el destello de contenido durante la carga de página en conexiones lentas
- Usa los selectores CSS proporcionados en el formulario de edición para crear diseños de popup personalizados que coincidan con el theme de tu sitio
- Para popups de intención de salida, el activador solo se dispara cuando el mouse abandona a través de los 20 píxeles superiores del viewport, imitando la intención de cerrar la pestaña del navegador
- Combina los conteos de visitas estratégicamente - usa '1,4,7' para mostrar en la primera, cuarta y séptima visita para remarketing efectivo sin ser intrusivo
- Establece la expiración de cookie en 0 para popups basados en sesión (como consentimiento de cookies) que deben aparecer en cada nueva sesión del navegador
- Usa la configuración de ancho de activación para ocultar popups promocionales en dispositivos móviles donde el espacio de pantalla es limitado
- La función de minimizar es útil para anuncios que los usuarios pueden querer consultar de nuevo durante su sesión
- Cuando uses selectores CSS personalizados, asegúrate de que el elemento objetivo tenga un id o clase único para evitar conflictos con otros elementos de la página
- Prueba las configuraciones de popup en una ventana de incógnito/privada del navegador para simular un nuevo visitante sin cookies existentes
Technical Details
Admin Pages 4
/admin/config/media/simple-popup-blocks/add
Crea una nueva configuración de popup seleccionando un bloque de Drupal o selector CSS personalizado y configurando todas las opciones de visualización incluyendo diseño, frecuencia, activadores y controles de estilo.
/admin/config/media/simple-popup-blocks/manage
Visualiza y gestiona todas las configuraciones de popup existentes en formato de tabla con acceso rápido a operaciones de editar y eliminar.
/admin/config/media/simple-popup-blocks/manage/{uid}
Edita una configuración de popup existente. Incluye todas las opciones del formulario de agregar más el interruptor de estado Habilitar/Deshabilitar y una tabla de selectores CSS para personalización de estilos.
/admin/config/media/simple-popup-blocks/delete/{uid}
Formulario de confirmación para eliminar permanentemente una configuración de popup.
Permissions 1
Hooks 2
hook_help
Proporciona texto de ayuda en la página de ayuda del módulo explicando los pasos básicos de configuración.
hook_page_attachments
Adjunta la librería JavaScript del popup y configuraciones a páginas que no son de administración. Lee todas las configuraciones de popup activas y las pasa a drupalSettings para procesamiento JavaScript.
Troubleshooting 6
Añade CSS a la hoja de estilos de tu theme para ocultar el elemento por defecto. Usa el selector CSS mostrado en la sección Adjustment class del formulario de edición. Ejemplo: #your-block-id { display: none; } Esto previene que el contenido sea visible hasta que JavaScript inicialice el popup.
1. Limpia todas las cachés de Drupal (Administración > Configuración > Rendimiento > Limpiar todas las cachés). 2. Verifica que el estado del popup esté configurado como 'Active' en la página de edición. 3. Comprueba si el bloque o elemento CSS realmente existe en la página actual. 4. Si usas conteo de visitas, intenta establecerlo en '0' para mostrar en cada visita para pruebas. 5. Revisa la consola del navegador por errores de JavaScript.
Este es el comportamiento esperado si el conteo de visitas está establecido en '0' (cada visita). Cambia el conteo de visitas a números específicos (ej., '1') para mostrar solo una vez, o usa la frecuencia por tiempo con configuración Daily/Weekly para limitar la frecuencia de aparición del popup.
Asegúrate de que el selector de activación en la configuración del popup comience con # o . (ej., #my-button o .trigger-class). Verifica que el elemento con ese selector exista en la página. Comprueba que el selector coincida exactamente incluyendo distinción entre mayúsculas y minúsculas.
El módulo deshabilita automáticamente los popups en rutas de administración. Si estás viendo un comportamiento inesperado, limpia las cachés y verifica que estés probando en una página que no sea de administración (ej., páginas de nodo, página principal).
La expiración de cookie de 0 elimina la cookie cuando el navegador se cierra (cookie de sesión). Cualquier número positivo establece la expiración en días. Verifica si tu navegador tiene las cookies habilitadas y no está bloqueando cookies de terceros. Usa las herramientas de desarrollador del navegador para inspeccionar las cookies con prefijo 'spb_'.
Security Notes 4
- Todas las configuraciones del popup son saneadas usando Html::escape() antes de ser pasadas a JavaScript para prevenir ataques XSS
- El módulo requiere el permiso 'administer simple_popup_blocks' para todas las páginas de configuración
- Los valores de las cookies contienen solo conteos de visitas numéricos o marcas de tiempo, no datos sensibles
- Los selectores CSS personalizados ingresados por los administradores deben ser validados para prevenir ataques de inyección - el módulo valida que los selectores no comiencen con . o # en el campo de entrada del selector