Lightbox vs. Modal
A lightbox is a modal made for pictures or video. A regular modal holds a choice, form, or short task.
Use a lightbox to enlarge pictures or video. Use a modal when the main job is to act or decide.
See what each pattern does
Try each example. Then read about the job it is made to do.
Lightbox
A lightbox opens media in a larger viewer and darkens the page around it.
<dialog>Select a photo to open a full-size view with a caption. It has Previous, Next, and Close buttons.
- Use it when
- Use it to look closely at media without losing the current place in the gallery.
- Do not use it when
- Never use it for a task that needs complex editing or side-by-side comparison.
- Name used in code
<dialog>
Modal Dialog
A modal dialog is a focused window. It blocks the current screen until someone closes or finishes it.
For account deletion, keyboard focus stays inside the dialog. If the person cancels, focus returns to the button that opened it.
- Use it when
- Use it for a short choice or small task that must get full attention.
- Do not use it when
- Never open one dialog on top of another or use one for normal, low-risk information.
- Name used in code
<dialog> / role="dialog" aria-modal="true"
Quick comparison
| UI pattern | Best for | Not for | Name used in code |
|---|---|---|---|
| Lightbox | Use it to look closely at media without losing the current place in the gallery. | Never use it for a task that needs complex editing or side-by-side comparison. | <dialog> |
| Modal Dialog | Use it for a short choice or small task that must get full attention. | Never open one dialog on top of another or use one for normal, low-risk information. | <dialog> / role="dialog" aria-modal="true" |
Before you ship
- 01
Write down what the person needs to do.
- 02
Test the keyboard, focus, touch, zoom, loading, empty, and error states.
- 03
Make sure people can get the same information without hover or motion.
- 04
Test with real content on both small and large screens.
Comparison request you can copy
Copy this when your team needs help choosing between the patterns.
Choose the best pattern from Lightbox, Modal Dialog for our real user flow. Use this rule: A lightbox is a modal made for pictures or video. A regular modal holds a choice, form, or short task. Write down the task, amount of content, and cost of stopping the flow. Check keyboard, touch, loading, error, and reduced-motion behavior. Explain your choice, then build the smallest accessible version with the project's design system.