Foundation Modal

Foundation provides modal dialogs for displaying content in an overlay.

Basic Modal

<!-- Trigger Button -->
<button class="button" data-open="exampleModal">Launch Demo Modal</button>

<!-- Modal -->
<div class="reveal" id="exampleModal" data-reveal>
  <h1>Modal Title</h1>
  <p>This is a basic modal dialog.</p>
  <button class="close-button" data-close aria-label="Close modal" type="button">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

Modal Sizes

<!-- Small Modal -->
<div class="tiny reveal" id="smallModal" data-reveal>
  <h3>Small Modal</h3>
  <p>This is a small modal.</p>
</div>

<!-- Large Modal -->
<div class="large reveal" id="largeModal" data-reveal>
  <h3>Large Modal</h3>
  <p>This is a large modal.</p>
</div>

<!-- Full-screen Modal -->
<div class="full reveal" id="fullModal" data-reveal>
  <h3>Full Modal</h3>
  <p>This is a full-screen modal.</p>
</div>

Modal with Form

<button class="button success" data-open="formModal">Open Form Modal</button>

<div class="reveal" id="formModal" data-reveal>
  <h2>Contact Form</h2>
  <form>
    <label>Name
      <input type="text" placeholder="Enter your name">
    </label>
    <label>Email
      <input type="email" placeholder="Enter your email">
    </label>
    <label>Message
      <textarea placeholder="Enter your message"></textarea>
    </label>
  </form>
  <button class="close-button" data-close type="button">&times;</button>
</div>

Alert Modal

<button class="button alert" data-open="alertModal">Delete Item</button>

<div class="alert reveal" id="alertModal" data-reveal>
  <h3 class="text-alert">Confirm Deletion</h3>
  <p>Are you sure you want to delete this item? This action cannot be undone.</p>
  <button class="button secondary" data-close>Cancel</button>
  <button class="button alert">Delete</button>
  <button class="close-button" data-close type="button">&times;</button>
</div>

Modal Animation

<!-- Fade-in animation -->
<div class="reveal fade-in" id="animatedModal" data-reveal data-animation-in="fade-in" data-animation-out="fade-out">
  <h3>Animated Modal</h3>
  <p>This modal has fade animations.</p>
</div>

<!-- Slide-in animation -->
<div class="reveal" id="slideModal" data-reveal data-animation-in="slide-in-down" data-animation-out="slide-out-down">
  <h3>Slide Modal</h3>
  <p>This modal slides in from top.</p>
</div>

<!-- Hinge animation -->
<div class="reveal" id="hingeModal" data-reveal data-animation-in="hinge-in-from-top" data-animation-out="hinge-out-from-top">
  <h3>Hinge Modal</h3>
  <p>This modal uses hinge animation.</p>
</div>

Up next: Foundation Tooltip