Modals · KeenPureAdmin

Modales básicos

Diálogos modales estándar para las interacciones del usuario

Tamaños estándar

Tipos de modal

Banded Modals · v2.7.0

is_banded emits pa-modal--banded alongside the role variant. Both header AND footer get filled bands using the alert tokens (15% role-mix in light mode, 45% in dark). Buttons inside the bands auto-invert via --pc-text-color-1 for cross-theme contrast.

Modificadores de posición

Modificadores de comportamiento

Modales de formulario

Modales que contienen formularios y contenido interactivo

Modales de confirmación

Diálogos de confirmación de acciones y de decisión

Modal pequeño

This is a small modal dialog. Perfect for quick notifications or simple confirmations.

Modal mediano

This is a medium-sized modal dialog. Great for forms and detailed content.

You can include multiple paragraphs, lists, and other content here.

Feature 1
Feature 2
Feature 3

Modal grande

Column 1

Large modals are perfect for complex content layouts with multiple columns.

You can use the PureCSS grid system inside modals to create sophisticated layouts.

Column 2

This second column demonstrates how you can organize content in larger modal dialogs.

Tip: Large modals work great for dashboards and detailed forms.

Modal extra grande

Column 1

Extra large modals provide ample space for comprehensive content displays.

Perfect for data tables, reports, and detailed analytics dashboards.

Column 2

You can display complex data structures, charts, and visualizations.

Note: XL modals are 70rem wide (1120px).

Column 3

Three-column layouts work beautifully in extra large modals.

Ideal for comparison views and side-by-side content.

Modal XXL - tamaño máximo

Section 1

XXL modals are the largest available size at 90rem (1440px) wide.

Perfect for full-featured application interfaces within a modal.

Section 2

Ideal for complex workflows that require maximum screen real estate.

Great for: Data grids, reporting tools, and analytics.

Section 3

Four-column layouts provide exceptional flexibility for content organization.

Dashboard views
Complex forms
Data comparisons

Section 4

On smaller screens, these columns will stack responsively.

Note: Consider viewport size when using XXL modals.

Full Width Content Area

You can also use the full width for single-column content when needed. This is particularly useful for wide tables, code editors, or visual design tools.

Nested cards and components work seamlessly within XXL modals, allowing you to create rich, interactive interfaces.

Modal de ancho completo - Máxima cobertura de pantalla

Full Width Mode: This modal takes up the entire viewport minus a small margin (1rem on all sides), providing maximum workspace while maintaining modal appearance.

Navegación

Dashboard
Analytics
Reports
Settings

Área de contenido principal

Full-width modals are perfect for complex applications that need to run within a modal context. Examples include:

Code Editors: Full IDE-like experiences
Design Tools: Canvas-based applications
Data Analysis: Large spreadsheets or pivot tables
Media Galleries: Full-screen photo/video management
Document Viewers: PDF readers, document editors

Propiedades

Ancho

Altura

Margen

✓ ¡Éxito!

Your action has been completed successfully!

Operation completed without any errors.

⚠ Advertencia

Please review your action before proceeding.

This action may have consequences that cannot be undone.

🔥 Zona de peligro

This action is potentially destructive.

Warning: This action cannot be undone and may result in data loss.

Modal centrado (predeterminado)

This is the default modal behavior - centered vertically and horizontally in the viewport.

This works well for most use cases where you want the modal to be the focal point.

Modal alineado arriba

This modal uses the pa-modal--top modifier to position it near the top of the viewport.

This is useful for:

Search interfaces (similar to command palette)
Quick actions that don't need full attention
Modals that might contain tall content
Better visual flow when content extends below fold

Modal estático

This modal cannot be closed by:

Pressing the Escape key
Clicking the backdrop

Use case: Critical confirmations, license agreements, or processes that must be completed.

You must click a button below to close this modal.

Contáctanos

Nombre

Correo electrónico

Mensaje

Iniciar sesión

Nombre de usuario

Contraseña

Recordarme

Configuración

Configuración general

Tema

Habilitar notificaciones

Configuración de privacidad

Compartir datos de analítica

Novedades por correo electrónico

Confirmar eliminación

Are you sure you want to delete this item?

This action cannot be undone.

Confirmar acción

Do you want to proceed with this action?

This will update your preferences and may affect other users.

Información

Here's some important information you should know:

Your subscription will expire in 7 days. Consider renewing to continue enjoying all features.

Feature access will be limited after expiration
Your data will remain safe for 30 days
You can renew at any time

✓ Copia de seguridad completada

All 2.4 GB of data has been backed up successfully. The archive is available in your cloud storage.

Buttons inside the header and footer auto-invert (--pc-text-color-1) for cross-theme contrast — light theme renders dark-on-pale, dark theme renders light-on-muted.

⚠ Almacenamiento casi lleno

You're using 92% of your 100 GB quota. Consider upgrading or archiving older files.

🔥 Eliminación permanente

This will permanently delete 14 projects and 1,283 files. The action cannot be undone.

Nueva función disponible

Banded modals shipped in pure-admin v2.7.0. Combine the existing role variant with is_banded and both header + footer get filled bands using the alert tokens.

Nueva tarea asignada

Compilación completada

Mantenimiento del servidor