Reveal is Foundation’s modal dialog. Triggers use data-open="modalId"; the panel is a div.reveal with data-reveal. Close with data-close on buttons or the overlay—Foundation moves focus and toggles aria-hidden when JS runs.
Structure
- Keep headings inside the reveal for context
- Primary actions stay in the modal footer area; destructive actions need clear labels
- Avoid stacking multiple open reveals—initialize one dialog at a time
Compare with Bootstrap modals (data-bs-toggle="modal")—same UX contract, different attribute names. Interviewers care that you know modals require JS, focus trap testing, and escape hatch markup.
Self-check
- Which attribute opens a reveal from a button?
- What class marks the modal root element?
- How do users dismiss the overlay with keyboard-friendly controls?
Challenge
Open a modal
- Wire a button with
data-open="myModal". - Click to open; close with the close button.
Done when: Reveal modal opens and closes via Foundation JS.