📖 Step 2: Design - UI/UX Basics#43 / 350
Modal
Modal
📖One-line summary
A popup that floats over the screen and captures focus.
💡Easy explanation
A small popup that appears on top of the current screen. Commonly used for confirmations like "Are you sure you want to delete?" or login forms.
✨Example
Click the button
⚡Vibe coding prompt examples
>_
Build a modal component containing a login form. It should close on outside click and on ESC.
>_
Build a product delete confirm modal. Show 'Are you sure you want to delete?' with confirm/cancel buttons.
>_
Implement background scroll lock when the modal opens. Apply a focus trap so Tab cycles only inside the modal.
Try these prompts in your AI coding assistant!