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
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.
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.
with many cats