Modal / Popup
A trigger (button, text, icon or image) that opens custom content in a modal — centered card, side drawer or fullscreen. Tabs: Content, Design, Styling, Animations, Advanced.
💡 Web dev tip: a modal must manage focus
When a dialog opens, keyboard focus should move into it, stay trapped while it's open, close on Esc, and return to the trigger afterwards — otherwise keyboard and screen-reader users get lost behind the overlay. Mark it up as role="dialog" with aria-modal="true". UnysonPlus' modal does this. W3C: dialog pattern
Live demo
▶ See the Modal / Popup live on the demos site — an interactive example you can click through.
Content
| Option | Choices |
|---|---|
| Trigger | Button · Text link · Icon · Image |
| Trigger Label | Default Open |
| Trigger Icon / Image | Used for the Icon / Image triggers |
| Modal Title | Optional |
| Modal Content | HTML allowed |
Design
| Option | Choices |
|---|---|
| Modal Style | Center · Left drawer · Right drawer · Fullscreen · … |
| Size | Small · Medium · Large (centered card) |
| Open Animation | Fade · Zoom · Slide up |
| Open Automatically | On/Off (with Open Delay in ms) |
| Close on Overlay Click | On/Off |
Styling
Trigger / Accent Color, Overlay Color, Modal Background, Modal Text, a Font Size Preset, and Trigger Margin & Padding.