How do I create popups or lightboxes?

Name the pattern, not just "popup"

"Popup" can mean several different UI patterns — be specific about which one:

Pattern	Use case	shadcn/ui component
Modal dialog	Confirmations, forms, detail views	Dialog
Image lightbox	Enlarging a clicked image/gallery item	Dialog with an image, or a dedicated lightbox pattern
Slide-out panel	Cart, filters, mobile nav	Sheet
Toast/notification	Brief confirmation ("Saved")	Toast/Sonner

Prompt example

When a user clicks a product image, open it in a lightbox-style modal showing the full-size image with a close button and click-outside-to-close. Use the existing Dialog component styling.

Things to specify

• Trigger: what opens it (button click, page load timer, exit intent).
• Close behaviour: X button, click outside, Escape key — ideally all three for accessibility.
• Content: what's inside (image, form, message).
• Frequency: for marketing popups (newsletter signup, discount offer), specify whether it shows once per session, after a delay, or on exit intent — "show every time" annoys visitors fast.

Accessibility basics

Ask Lovable to ensure the modal traps focus while open, returns focus to the trigger on close, and is dismissible with Escape — shadcn's Dialog handles most of this by default, but it's worth confirming for anything custom-built.

What usually goes wrong

• Marketing popups that appear immediately on page load annoy visitors and hurt conversion — ask for a delay or scroll/exit-intent trigger instead.
• Forgetting to test that the modal closes properly on mobile, where click-outside can be harder to trigger accurately — make sure the close button is easy to tap.
• Multiple popups stacking or conflicting (e.g. a newsletter popup and a cookie banner both appearing at once) — check the full page flow, not just the popup in isolation.