Basic Modals
Standard modal dialogs for user interactions
Standard Sizes
Modal Types
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.
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.
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.
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.
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
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
| Feature | Description | Status |
|---|---|---|
| Responsive | Adapts to all screen sizes | Active |
| Full Screen | Maximizes available viewport | Active |
| Modal Border | Maintains 1rem margin | Configured |
Properties
✓ Success!
Your action has been completed successfully!
⚠ Warning
Please review your action before proceeding.
🔥 Danger Zone
This action is potentially destructive.
Contact Us
Sign In
Settings
General Settings
Privacy Settings
Confirm Delete
Are you sure you want to delete this item?
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:
- Feature access will be limited after expiration
- Your data will remain safe for 30 days
- You can renew at any time
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
You must click a button below to close this modal.
CSS Classes Reference
Modal Base
pa-modal- Modal wrapper (hidden by default)pa-modal--show- Display the modalpa-modal--top- Position near top of viewportpa-modal--static- Prevent close on backdrop/ESC
Modal Sections
pa-modal__backdrop- Dark overlay behind modalpa-modal__container- Dialog box (default: medium)pa-modal__header- Header with title and close buttonpa-modal__title- Modal title textpa-modal__body- Content area (scrollable)pa-modal__body--scrollable- Limit height with scrollpa-modal__footer- Action buttons area
Container Sizes
pa-modal__container--sm- Small (30rem / 480px)pa-modal__container- Medium (default, 50rem / 800px)pa-modal__container--lg- Large (60rem / 960px)pa-modal__container--xl- Extra large (70rem / 1120px)pa-modal__container--xxl- XXL (90rem / 1440px)pa-modal__container--fw- Full width (viewport - margin)
Themed Headers
pa-modal--primary- Primary color headerpa-modal--success- Success (green) headerpa-modal--warning- Warning (yellow) headerpa-modal--danger- Danger (red) header