Modals · KeenPureAdmin

Basic Modals

Standard modal dialogs for user interactions

Standard Sizes

Modal Types

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.

Position Modifiers

Behavior Modifiers

Form Modals

Modals containing forms and interactive content

Confirmation Modals

Action confirmation and decision dialogs

Small Modal

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

Medium Modal

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

Large Modal

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.

Extra Large Modal

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.

XXL Modal - Maximum Size

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.

Full Width Modal - Maximum Screen Coverage

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.

Navigation

Dashboard
Analytics
Reports
Settings

Main Content Area

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

Properties

Width

Height

Margin

✓ Success!

Your action has been completed successfully!

Operation completed without any errors.

⚠ Warning

Please review your action before proceeding.

This action may have consequences that cannot be undone.

🔥 Danger Zone

This action is potentially destructive.

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

Centered Modal (Default)

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.

Top-Aligned Modal

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

Static Modal

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.

Contact Us

Name

Message

Sign In

Username

Password

Remember me

Settings

General Settings

Theme

Enable notifications

Privacy Settings

Share analytics data

Email updates

Confirm Delete

Are you sure you want to delete this item?

This action cannot be undone.

Confirm Action

Do you want to proceed with this action?

This will update your preferences and may affect other users.

Information

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

✓ Backup completed

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.

⚠ Storage almost full

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

🔥 Permanent deletion

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

New feature available

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.

New task assigned

Build completed

Server maintenance