Loading...
PTModalNew Examples
Demo of our custom modal system without HeroUI dependencies.
Modal Configuration (Applied to all modals below)
Responsive Mode
Size
Small
Medium
Large
Extra Large
Animation
Fade
Slide
Scale
Placement
Center
Top
Bottom
🚀 Test Current Configuration
Basic Modal Examples
Open Basic Modal
Open Custom Form Modal
Open Nested Modals
Open Scrollable Modal
Open Always-Responsive Modal
Open Bottom Sheet Modal
Component-Based Modal Examples
Custom Header & Footer
Floating Footer Modal
Advanced Composition
🎠Backdrop Blur Test
Features
✓
Multiple sizes (sm, md, lg, xl, full)
✓
Three animation styles (fade, slide, scale)
✓
Flexible placement (center, top, bottom)
✓
Modal stacking support
✓
Portal rendering (no z-index issues)
✓
Backdrop blur effect
✓
Backdrop click & ESC key to close
✓
Scroll locking when modal is open
✓
TypeScript support
✓
Responsive breakpoint support
✓
Bottom sheet with swipe-to-expand and drag-to-close
✓
Click outside to close
✓
Component-based architecture (PTModalHeader, PTModalContent, PTModalFooter)
✓
Custom header and footer support
✓
Floating/sticky footer functionality
