Diálogo modal
Diálogos modales accesibles con fondo oscurecido, captura de foco y animaciones suaves. Disponible en variantes predeterminada, alerta, confirmación y solicitud de entrada. Construido con Stimulus y Tailwind CSS.
Predeterminado
Diálogo modal de propósito general con título, contenido y botón de cierre
████ ███████████████████████
████████████████████████████████████████████████
███████████████ █████
█████████████████████████████
█████████████
██████████████████
████ ████████ ███
████ ████████████████████████████
████████████████████████████████
████████████ ███████ ███████████████ ████████████████ ██████████████████████████
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ████████████ ████████ █████████████ ██████████████
█████████ █
█████████ █ ████
██ ██████████ ███ ██████ █████ ██ ██ ███████ █████████ █████ ███ ███████ ██████
██ ███████████████████████████ █
█ ██████████████████████ ████
█████ ██████████████ █ ███████████████████
███████████ ██████
███ ██████████████████
██████ █ █████
███
███ ████
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ████████████ ████████ █████████████ ██████████████
█████████ █
█████████ █ ████
██ ██████████ ███ ██████ █████ ██ ██ ███████ █████████ █████ ███ ███████ ██████
██ ███████████████████████████ █
Alerta
Diálogo de alerta con icono de variante, mensaje y botón Único de Aceptar
███ ███████ █████████ ██████ ███████ █████████ ██████████████ █████ ███
██
██████████████ █ █
█████ █ ████████ ████████████ █████████████████████ ██████████ ██████████████ ████████████████████ ██████████ ████████████ █████████████████ ████████████████ ████████████████████████ ████████████ █████████████ ███████████ █████████████████████████████ ██
████████ █ ████████ █████████████ ██████████████████████ ██████████ ███████████████ █████████████████████ ██████████ █████████████ ██████████████████ █████████████████ █████████████████████████ ████████████ █████████████ ███████████ ██████████████████████████████ ██
███████ █ ████████ ███████████ ████████████████████ ██████████ █████████████ ███████████████████ ██████████ ███████████ ████████████████ ███████████████ ███████████████████████ ████████████ █████████████ ███████████ ████████████████████████████ ██
████████ █ ████████ ███████████████ ████████████████████████ ██████████ █████████████████ ███████████████████████ ██████████ ███████████████ ████████████████████ ███████████████████ ███████████████████████████ ████████████ █████████████ ███████████ ████████████████████████████████ █
█
██████ █ ██████████████████████████████ ██ █████████████████████
██
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ████████████ ████████ █████████████ ██████████████
█████████ █
█████████ █ ████
██ ██████████ ███ ██████ █████ ██ ██ ███████ █████████ █████ ███ ███████ ██████
██ ███████████████████████████ █
█ ██████████████████████ ████
█████ ███████████████████ █ ███████████████████
███████████ █████████ ███████ █████████ ██████████████
████████ █ ███████ ███████ ██████ ███████████████
███ ███████████████████ ██████ ███████ █████████ ██████████████ █████
████████ █ █████████████████████████████████ █ ██████████████ █ █████
██████ █ █████
████ ███████████████████████
████████████████████████████████████████████████
███████████████ █████
███████████████████████████████████
██████████████████
██████████████████
████ ████████ ███
████ ████████████████████████████
████████████ ███████ ███████████████ ████████████████ ██████████████████████████
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ████████████ ████████ █████████████ ██████████████
█████████ █
█████████ █ ████
██ ██████████ ███ ██████ █████ ██ ██ ███████ █████████ █████ ███ ███████ ██████
██ ███████████████████████████ █
Confirmación
Diálogo de confirmación con icono, mensaje y botones Cancelar/Confirmar
███ ███████ █████████ ██████ ███████ █████████ ██████████████ ██████████ █████████████ █████████ ███
██
██████████████ █ █
█████ █ ████████ ████████████ █████████████████████ ██████████ ██████████████ ████████████████████ ██████████ ████████████ █████████████████ ████████████████ ████████████████████████ ████████████ █████████████ ███████████ █████████████████████████████ ██
████████ █ ████████ █████████████ ██████████████████████ ██████████ ███████████████ █████████████████████ ██████████ █████████████ ██████████████████ █████████████████ █████████████████████████ ████████████ █████████████ ███████████ ██████████████████████████████ ██
███████ █ ████████ ███████████ ████████████████████ ██████████ █████████████ ███████████████████ ██████████ ███████████ ████████████████ ███████████████ ███████████████████████ ████████████ █████████████ ███████████ ████████████████████████████ ██
████████ █ ████████ ███████████████ ████████████████████████ ██████████ █████████████████ ███████████████████████ ██████████ ███████████████ ████████████████████ ███████████████████ ███████████████████████████ ████████████ █████████████ ███████████ ████████████████████████████████ █
█
██████ █ ██████████████████████████████ ██ █████████████████████
██
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ████████████ ████████ █████████████ ██████████████
█████████ █
█████████ █ ████
██ ██████████ ███ ██████ █████ ██ ██ ███████ █████████ █████ ███ ███████ ██████
██ ███████████████████████████ █
█ ██████████████████████ ████
█████ █████████████████████ █ ███████████████████
███████████ █████████ ███████ █████████ ███████████████ █████████████
████████ █ ███████ ███████ ██████ ███████████████
███ ███████████████████ ██████ ███████ █████████ ██████████████ ██████████ █████████████ █████████
████████ █ █████████████████████████████████ █ ██████████████ █ █████
██████ █ █████
████ ███████████████████████
█████████████████████████████████████████████████
███████████████ █████
█████████████████████████████████████
██████████████████
██████████████████
████ ████████ ███
████ ████████████████████████████
████████████ ███████ ███████████████ ████████████████ ██████████████████████████
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ████████████ ████████ █████████████ ██████████████
█████████ █
█████████ █ ████
██ ██████████ ███ ██████ █████ ██ ██ ███████ █████████ █████ ███ ███████ ██████
██ ███████████████████████████ █
Solicitud
Diálogo de solicitud con icono, mensaje, campo de entrada y botones Cancelar/Enviar
███ ███████ █████████ ██████ ███████ █████████ ████████████ ████ ██████████████████ ███ ████████████ ███ ██████████████ █████████ █████████████ █████████ ███
██
██████████████ █ █
█████ █ ████████ ████████████ █████████████████████ ██████████ ██████████████ ████████████████████ ██████████ ████████████ █████████████████ ████████████████ ████████████████████████ ████████████ █████████████ ███████████ █████████████████████████████ ██
████████ █ ████████ █████████████ ██████████████████████ ██████████ ███████████████ █████████████████████ ██████████ █████████████ ██████████████████ █████████████████ █████████████████████████ ████████████ █████████████ ███████████ ██████████████████████████████ ██
███████ █ ████████ ███████████ ████████████████████ ██████████ █████████████ ███████████████████ ██████████ ███████████ ████████████████ ███████████████ ███████████████████████ ████████████ █████████████ ███████████ ████████████████████████████ ██
████████ █ ████████ ███████████████ ████████████████████████ ██████████ █████████████████ ███████████████████████ ██████████ ███████████████ ████████████████████ ███████████████████ ███████████████████████████ ████████████ █████████████ ███████████ ████████████████████████████████ █
█
██████ █ ██████████████████████████████ ██ █████████████████████
██
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ████████████ ████████ █████████████ ██████████████
█████████ █
█████████ █ ████
██ ██████████ ███ ██████ █████ ██ ██ ███████ █████████ █████ ███ ███████ ██████
██ ███████████████████████████ █
████ ███████████████████████
█████████████████████████████████████████████████
███████████████ █████
████████████████████████████████████
█████████████
██████████████████
████ ████████ ███
████ ████████████████████████████
████████████ ███████ ███████████████ ████████████████ ██████████████████████████
█ ██████████████████████ ████
█████ ████████████████████ █ ███████████████████
███████████ █████████ ███████ █████████ ███████████████ ██████████████
█████████████ ███████████████████ ████████████
████████ █ ███████ ███████ ██████ ███████████████
███ ███████████████████ ██████ ███████ █████████ ██████████████ █████████ █████████████ █████████
████████████ ████ ██████████████████ ███ ████████████ ███
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ████████████ ████████ █████████████ ██████████████
█████████ █
█████████ █ ████
██ ██████████ ███ ██████ █████ ██ ██ ███████ █████████ █████ ███ ███████ ██████
██ ███████████████████████████ █
Registro de Cambios
- v2.0.0: Converted to multi-style with alert, confirm, and prompt variants
- v1.1.0: Added ViewComponent format support
- v1.0.0: Initial release with focus trap, backdrop click to close
Obtener Acceso Completo
Desbloquea el código fuente de este componente y todos los demás. Un solo pago para acceso de por vida.
Obtener Acceso