Full-screen Modal Windows

Foundation comes with a modal window component called Reveal. Foundation provides six (including the default) CSS-class size options.

When using mobile, it's useful to have modal windows take up the full screen; no more, no less. Foundation Mobile provides this as a seventh size option.

To use the full-screen modal, just add the full-screen class to your div.reveal-modal element.

Click Me For A Modal

Make sure that your modal element is nested directly under the body element, so that it gets positioned relative to the screen rather than some other element in the DOM.

Unlike the six original size options provided in Foundation, this class attaches some JavaScript functionality to the modal to size it exactly right for the screen. It also does some magic with the close-reveal-modal element to keep it at a fixed position on the screen as the user scrolls, so that they don't need to scroll back up to close the modal element.