Modal
UI component documentation for modal
Overview
UI component documentation for modal
Reference Content
Description
The Modal component provides a flexible overlay system for displaying content above the main page. It includes proper focus management, keyboard navigation, backdrop interactions, and various size options. Fully compliant with WCAG accessibility standards.
Features
- Multiple Variants: Basic, form, confirmation, fullscreen, scrollable
- Accessibility: ARIA attributes, focus trap, screen reader support
- Keyboard Navigation: Escape to close, Tab cycling within modal
- Focus Management: Auto-focus first element, restore focus on close
- Animation: Smooth open/close transitions
- Backdrop: Click-to-close with blur effect
- Programmatic API: Create modals dynamically
- Form Support: Unsaved changes warning
- Responsive: Mobile-optimized fullscreen on small screens
Properties/Options
| Property | Type | Description | Default | |||
|---|---|---|---|---|---|---|
id | string | Unique modal identifier | Required | |||
title | string | Modal header title | Required | |||
content | string \ | HTML | Modal body content | - | ||
size | default \ | small \ | wide \ | fullscreen | Modal size variant | default |
showClose | boolean | Show close button | true | |||
showFooter | boolean | Show footer section | true | |||
backdrop | boolean | Show backdrop | true | |||
closeOnEscape | boolean | Close on Escape key | true | |||
closeOnBackdrop | boolean | Close on backdrop click | true |
Usage Examples
Code Reference
{{code:modal.html}}
{{code:modal.css}}
{{code:modal.js}}
Live Demo
{{demo:modal}}
Modal Types
Standard modal with header, body, and footer sections.
API Methods
| Method | Description | Parameters | Returns | |
|---|---|---|---|---|
openModal(id, options) | Open modal by ID | id: string, options: object | void | |
closeModal(id, options) | Close modal | id: string, options: object | void | |
toggleModal(id) | Toggle modal state | id: string | void | |
createModal(options) | Create modal dynamically | options: object | HTMLElement | |
alert(message, title) | Show alert modal | message: string, title: string | HTMLElement | |
confirm(message, title) | Show confirmation | message: string, title: string | Promise | |
prompt(message, title, default) | Show input prompt | message: string, title: string, default: string | Promise |
Events
| Event | Description | Detail |
|---|---|---|
modal:opened | Fired when modal opens | { modalId, modal } |
modal:closed | Fired when modal closes | { modalId, modal } |
modal:open | Trigger modal open | { modalId, options } |
modal:close | Trigger modal close | { modalId, options } |
modal:toggle | Toggle modal state | { modalId } |
Accessibility Notes
- Role & ARIA: Proper
role="dialog"witharia-labelledbyandaria-describedby - Focus Management: Automatic focus trap within modal, restores focus on close
- Keyboard Navigation:
Escape - Close modal-
Tab - Cycle through focusable elements-
Shift+Tab - Reverse cycle
- Screen Reader: Announces modal opening/closing with proper context
- Backdrop: Semi-transparent with blur for visual separation
- Alert Dialogs: Uses
role="alertdialog"for critical confirmations - Form Labels: All form inputs have associated labels
CSS Variables
/ Customize modal appearance /
--modal-bg: white;
--modal-backdrop: rgba(0, 0, 0, 0.5);
--modal-border-radius: 0.75rem;
--modal-shadow: 0 20px 25px rgba(0, 0, 0, 0.15);
--modal-max-width: 32rem;
--modal-z-index: 9999;Browser Support
- Chrome 90+
- Firefox 88+
- Safari 14+
- Edge 90+
- Mobile browsers (iOS Safari, Chrome Mobile)
Best Practices
1. Always provide meaningful titles and descriptions
2. Use appropriate modal size for content
3. Avoid nested modals
4. Provide clear action buttons
5. Handle unsaved form data before closing
6. Use confirmation modals for destructive actions
7. Ensure content is scrollable if needed
8. Test keyboard navigation thoroughly