Modal
Permite la creación y gestión de diálogos modales basados en Bootstrap a través del CMS sin necesidad de programar.
modal_page
Install
composer require 'drupal/modal_page:^5.1'
composer require 'drupal/modal_page:^5.0'
Overview
Modal Page es un módulo completo para Drupal que permite a los administradores del sitio crear y gestionar diálogos modales (lightboxes) completamente a través de la interfaz del CMS. El módulo proporciona un sistema flexible de entidades de configuración para definir modales con amplias opciones de personalización.
Los modales pueden activarse de múltiples formas: automáticamente al cargar la página, después de un retraso, al desplazarse a una posición específica de la página, o al hacer clic en un elemento HTML designado. Cada modal admite control de acceso basado en roles, filtrado multilingüe y programación para publicar/despublicar automáticamente en horarios específicos.
El módulo se integra con Bootstrap 3 o 5 para la visualización de modales e incluye amplias opciones de personalización para encabezados, pies de página, botones, estilos y comportamiento. Una función "No mostrar de nuevo" con gestión de cookies permite a los usuarios descartar los modales permanentemente.
Features
- Crear modales ilimitados a través de la interfaz de administración sin escribir código
- Mostrar modales en páginas específicas usando patrones de ruta con soporte de comodines
- Mostrar modales mediante parámetro URL (?modal=valor)
- Apertura automática de modales al cargar la página con retraso opcional en segundos
- Activar modales según la posición de desplazamiento (píxeles o porcentaje)
- Activar modales al hacer clic en selectores CSS personalizados (clase o ID)
- Soporte para Bootstrap 3 y Bootstrap 5 con detección automática de carga
- Tamaños de modal personalizables (pequeño, mediano, grande)
- Control total sobre el encabezado del modal: visualización del título, línea horizontal, botón de cerrar (X), botón de maximizar
- Control total sobre el pie de página del modal: botón OK, botón de descartar, casilla "No mostrar de nuevo"
- Funcionalidad "No mostrar de nuevo" basada en cookies con tiempo de expiración personalizable
- Opción para mostrar el modal solo una vez por sesión
- Ocultar automáticamente el modal después de segundos especificados
- Control de acceso basado en roles para restringir modales a roles de usuario específicos
- Soporte multilingüe: restringir modales a idiomas específicos
- Programación: publicar y despublicar automáticamente modales en fechas/horas específicas
- Soporte para incrustar videos de YouTube en el cuerpo del modal
- Redirección a URL después de hacer clic en el botón OK
- Clases CSS personalizadas para modal, encabezado, pie de página y todos los botones
- Comportamiento de cierre del modal: tecla ESC y clic fuera configurable
- Creación programática de modales mediante Entity API
- Hooks para modificar modales y manejar eventos de envío
- Comando Drush para programación basada en cron
- Soporte para sobrescritura de plantillas de tema con patrones de sugerencia
Use Cases
Mensaje de bienvenida para visitantes nuevos
Cree un modal que aparezca en la página de inicio (<front>) con apertura automática habilitada. Active "Mostrar modal solo una vez" para que los visitantes recurrentes no lo vean de nuevo. Use un mensaje de bienvenida amigable con un enlace a contenido popular.
Aviso de consentimiento de cookies
Cree un modal con la opción "No mostrar de nuevo" habilitada. Configure para que aparezca en todas las páginas (deje el campo Páginas vacío). Configure un tiempo de expiración de cookie corto (ej. 365 días) para cumplimiento. Añada una clase CSS personalizada para estilos y use la función de enlace de redirección para vincular a su política de privacidad.
Popup de suscripción al boletín
Cree un modal con un retraso de 30 segundos o activado después de desplazarse un 50% hacia abajo en la página. Incluya su formulario de suscripción al boletín en el cuerpo usando un formulario incrustado o iframe. Active "Mostrar modal solo una vez" para evitar molestar a los visitantes recurrentes.
Tutorial en video en páginas específicas
Use el campo de YouTube para incrustar un video instructivo. Configure el modal para que aparezca en páginas específicas de documentación o funcionalidades. Habilite el botón de maximizar para que los usuarios puedan ver en modo de pantalla completa.
Campaña promocional con programación
Cree un modal promocional con fechas específicas de publicación y despublicación para una venta o evento. Use la restricción de roles para mostrar solo a usuarios autenticados. Configure el enlace de redirección para ir directamente a la página de promoción cuando los usuarios hagan clic en OK.
Anuncio solo para miembros
Cree un modal restringido a roles específicos (ej. usuarios autenticados, miembros premium). Use la función de restricción de idioma para anuncios multilingües. Programe la publicación/despublicación automática para contenido sensible al tiempo.
Modal activado por clic para detalles de producto
Desactive la apertura automática y configure "Abrir este modal al hacer clic en este elemento" a una clase CSS como ".product-quick-view". Añada esta clase a las tarjetas de producto en su sitio. El modal muestra información detallada del producto sin navegación de página.
Alternativa de intención de salida
Cree un modal activado al 90% de altura de desplazamiento. Esto captura a los usuarios que han leído la mayor parte de su contenido. Muestre una llamada a la acción u oferta de suscripción antes de que se vayan.
Tips
- Use comodines de ruta estratégicamente: /products/* coincide con todas las páginas de productos, /blog/* coincide con todo el contenido del blog
- Para pruebas A/B de diferentes mensajes de modal, cree múltiples modales con la misma configuración pero diferente contenido y restrinja cada uno a roles de usuario específicos
- Use las herramientas de desarrollo del navegador para inspeccionar el HTML del modal y añadir sobrescrituras CSS personalizadas en su tema
- Las sugerencias de plantilla permiten plantillas por modal: cree modal-page--[modal-id].html.twig para diseños personalizados
- Para creación programática de modales, use \Drupal::entityTypeManager()->getStorage('modal')->create() con setters para cada propiedad
- El hook modal_submit es ideal para rastrear eventos de analíticas cuando los usuarios interactúan con modales
- Combine modales activados por desplazamiento con rutas de página específicas para crear indicaciones contextuales que aparezcan cuando los usuarios interactúan con el contenido
Technical Details
Admin Pages 4
/admin/structure/modal
Lista todos los modales con operaciones para añadir, editar y eliminar. Muestra el título del modal, tipo, páginas/parámetros y estado de publicación.
/admin/structure/modal/add
Formulario para crear un nuevo modal con todas las opciones de configuración organizadas en pestañas verticales.
/admin/config/user-interface/modal-page/settings
Ajustes de configuración global para el módulo Modal Page.
/admin/modal/help
Página de ayuda con documentación del módulo y enlaces a páginas de administración.
Permissions 1
Hooks 3
hook_modal_alter
Permite a los módulos modificar cualquier modal antes de mostrarse. Se llama para cada modal que se mostrará en la página actual.
hook_modal_ID_alter
Permite a los módulos modificar un modal específico por su nombre máquina. Reemplace ID con el nombre máquina del modal.
hook_modal_submit
Se activa mediante AJAX cuando un usuario hace clic en el botón OK de un modal. Use esto para acciones personalizadas como registro, redirecciones o procesamiento de datos.
Drush Commands 1
drush modal_page:cron
Ejecutar el programador de Modal Page para procesar operaciones programadas de publicación/despublicación. Use esto para una programación más frecuente sin ejecutar el cron completo de Drupal.
Troubleshooting 5
Verifique que el modal esté publicado, que la ruta actual coincida con las páginas configuradas (revise las barras iniciales), y que el usuario actual tenga el rol requerido si la restricción de roles está habilitada. Revise la consola del navegador para errores de JavaScript.
Habilite "Verificar y cargar Bootstrap automáticamente" en la configuración global. Si su tema ya carga Bootstrap, asegúrese de que no entre en conflicto con la versión del módulo. Intente cambiar entre Bootstrap 3 y 5 en la configuración.
Verifique que las cookies estén habilitadas en el navegador. Compruebe que la expiración de la cookie esté configurada correctamente (0 significa solo sesión). Limpie las cookies del navegador y pruebe de nuevo. Verifique si "Mostrar modal solo una vez" entra en conflicto con "No mostrar de nuevo".
Asegúrese de que el cron de Drupal se ejecute regularmente. Para una programación más precisa, configure un trabajo cron dedicado usando el endpoint de cron de Modal Page (/modal-page/cron/{cron-key}) o el comando Drush (drush modal_page:cron).
Revise los patrones de ruta en la configuración del modal. Recuerde que los comodines (*) deben estar al final de las rutas. Use <front> para la página de inicio. Las rutas no distinguen mayúsculas y se comparan con los alias de ruta.
Security Notes 4
- El permiso 'administer modal page' está marcado como acceso restringido - solo otorgue a administradores de confianza
- El contenido del cuerpo del modal se procesa a través del sistema de formato de texto de Drupal, proporcionando protección XSS basada en el formato seleccionado
- Las etiquetas HTML permitidas para el contenido del modal son configurables en la configuración global para equilibrar funcionalidad y seguridad
- El endpoint de cron de programación requiere la clave de cron del sitio para autenticación