Modal dialogs, or pop-up windows, are handy for prototyping and production. Foundation includes Reveal our jQuery modal plugin, to make this easy for you.

Reveal modals are easy to build, just make sure they live right above your closing body tag or they won't work properly.

Example Modal Example Modal with Video

tiny: Set the width to 30%.

small: Set the width to 40%.

medium: Set the width to 60%.

large: Set the width to 70%.

xlarge: Set the width to 95%.

Firing a Reveal Modal

To launch a modal, just add a data-reveal-id to the object which you want to fire the modal when clicked. The data-reveal-id needs to match the id of your reveal.