Roots Foundation: Modal Windows

<a href="#" data-reveal-id="firstModal" class="radius button success">Example Modal</a>
<a href="#" data-reveal-id="videoModal" class="radius button success">Example Modal w/Video</a>

<!-- Reveal Modals begin -->
  <div id="firstModal" class="reveal-modal">
    <h2>This is a modal.</h2>
    <p>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 <code>close-reveal-modal</code>. Clicking anywhere outside the modal will also dismiss it.</p>
    <p>Finally, if your modal summons another Reveal modal, the plugin will handle that for you gracefully.</p>
    <p><a href="#" data-reveal-id="secondModal" class="secondary button">Second Modal...</a></p>
    <a class="close-reveal-modal">×</a>
  </div>

  <div id="secondModal" class="reveal-modal">
    <h2>This is a second modal.</h2>
    <p>See? It just slides into place after the other first modal. Very handy when you need subsequent dialogs, or when a modal option impacts or requires another decision.</p>
    <a class="close-reveal-modal">×</a>
  </div>

  <div id="videoModal" class="reveal-modal large">
    <h2>This modal has video</h2>
    <div class="flex-video">
      <iframe width="800" height="315" src="http://www.youtube.com/embed/IkOQw96cfyE" frameborder="0" allowfullscreen></iframe>
    </div>

    <a class="close-reveal-modal">×</a>
  </div>
  <!-- Reveal Modals end -->