Modal Examples
Modal Positioning
Demonstration of different modal positions using the contentPosition prop.
Modal Activity Log
Modal Events
No events yet...
Modal Component Features:
- Flexible Positioning - 9 position options (top/mid/bottom + left/center/right)
- Custom Styling - Configurable overlay and content classes
- Component Content - Accepts Duct components as content
- Overlay Click - Optional close on overlay click
- Keyboard Support - Escape key closes modal
- Body Scroll Lock - Prevents background scrolling
- Event System - Open, close, and overlay click events
- Programmatic Control - Show, hide, toggle, and state methods
Try it: Click any button to open different modal types. Try the "Position Demo" to see all 9 positioning options. Notice how each modal maintains its own state and can contain interactive components. Use Escape key or click overlay to close.