[one_fourth][accordiongroup][accordion title=”Features Default”][sidenav][sideitem link=””]Grid[/sideitem][sideitem link=””]Navigation[/sideitem][sideitem link=””]Buttons[/sideitem][sideitem link=””]Forms[/sideitem][sideitem link=””]Typography[/sideitem][/sidenav][/accordion][accordion title=”Javascript Features”][sidenav][sideitem link=””]Clearing[/sideitem][sideitem link=””]Dropdown[/sideitem][sideitem link=””]Joyride[/sideitem][sideitem link=””]Magellan[/sideitem][sideitem link=””]Reveal[/sideitem][sideitem link=””]Section[/sideitem][sideitem link=””]Info tooltips[/sideitem][sideitem link=””]Retina Icons – Font Awesome[/sideitem][sideitem link=””]Tooltips – Smallipop[/sideitem][/sidenav][/accordion][/accordiongroup][/one_fourth]


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.
[reveal color=”success” button=”Example Modal” revsize=”medium” revtitle=”This is a modal.”]

Reveal makes these very easy to summon and dismiss. The close button is simply an anchor with a unicode character icon and a class of close-reveal-modal. Clicking anywhere outside the modal will also dismiss it.

Finally, if your modal summons another Reveal modal, the plugin will handle that for you gracefully.

Second Modal…

[/reveal][reveal color=”success” button=”Example Modal with Video” revsize=”large” revtitle=”This modal has video”][/reveal]
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.


2 comments on “Reveal”

  1. Glenn Weissman Reply

    Hello there! I simply want to offer you a huge thumbs up for the excellent info you’ve got right here on this post. I am returning to your blog for more soon.

Leave A Reply

Your email address will not be published. Required fields are marked *

We are open for Business. Please contact 919-832-0500

COVID-19 Response Update