Kenhuang Academy
  • English

      • Foundation Modal

      Foundation Modal (Reveal) is a popup dialog component. This chapter covers various uses of modal components.

      Basic Modal

      <!-- Trigger button -->
<button class="button" data-open="exampleModal">Open Modal</button>

<!-- Modal -->
<div class="reveal" id="exampleModal" data-reveal>
    <h1>Modal Title</h1>
    <p>This is the modal content.</p>
    <button class="close-button" data-close aria-label="Close" type="button">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
      <!-- Tiny -->
<div class="reveal tiny" id="tinyModal" data-reveal>Content</div>

<!-- Small -->
<div class="reveal small" id="smallModal" data-reveal>Content</div>

<!-- Default -->
<div class="reveal" id="defaultModal" data-reveal>Content</div>

<!-- Large -->
<div class="reveal large" id="largeModal" data-reveal>Content</div>

<!-- Full -->
<div class="reveal full" id="fullModal" data-reveal>Content</div>

      No Overlay Modal

      <div class="reveal" id="noOverlayModal" data-reveal data-overlay="false">
    Content
</div>

      Nested Modals

      <div class="reveal" id="parentModal" data-reveal>
    <h1>Parent Modal</h1>
    <button class="button" data-open="childModal">Open Child Modal</button>
</div>

<div class="reveal" id="childModal" data-reveal>
    <h1>Child Modal</h1>
    <button class="button" data-close>Close</button>
</div>

      Configuration Options

      <div class="reveal" id="configModal" data-reveal
     data-close-on-click="true"
     data-close-on-esc="true"
     data-animation-in="fade-in"
     data-animation-out="fade-out">
    Content
</div>
      OptionDescriptionDefault
      data-close-on-clickClose on overlay clicktrue
      data-close-on-escESC key closetrue
      data-overlayShow overlaytrue
      data-animation-inEnter animation-
      data-animation-outExit animation-

      JavaScript API

      // Open modal
$('#myModal').foundation('open');

// Close modal
$('#myModal').foundation('close');

// Events
$('#myModal').on('open.zf.reveal', function() {
    console.log('Modal opened');
});

$('#myModal').on('closed.zf.reveal', function() {
    console.log('Modal closed');
});

      Complete Example

      <!DOCTYPE html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation Modal Example</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
    <style>
        .demo-section { margin-bottom: 40px; padding: 20px; background: #f8f8f8; }
        .demo-section h3 { margin-bottom: 20px; }
    </style>
</head>
<body>
    <div class="grid-container">
        <h1>Foundation Modal Showcase</h1>

        <div class="demo-section">
            <h3>Basic Modal</h3>
            <button class="button" data-open="basicModal">Open Modal</button>
        </div>

        <div class="demo-section">
            <h3>Different Sizes</h3>
            <button class="button tiny" data-open="tinyModal">Tiny</button>
            <button class="button small" data-open="smallModal">Small</button>
            <button class="button" data-open="defaultModal">Default</button>
            <button class="button large" data-open="largeModal">Large</button>
        </div>

        <div class="demo-section">
            <h3>Confirm Dialog</h3>
            <button class="button alert" data-open="confirmModal">Delete Item</button>
        </div>

        <div class="demo-section">
            <h3>Form Modal</h3>
            <button class="button" data-open="formModal">Login</button>
        </div>
    </div>

    <!-- Basic modal -->
    <div class="reveal" id="basicModal" data-reveal>
        <h1>Welcome</h1>
        <p class="lead">This is a basic modal example.</p>
        <p>You can place any content here.</p>
        <button class="close-button" data-close aria-label="Close" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>

    <!-- Tiny modal -->
    <div class="reveal tiny" id="tinyModal" data-reveal>
        <p>This is a Tiny size modal.</p>
        <button class="close-button" data-close aria-label="Close" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>

    <!-- Small modal -->
    <div class="reveal small" id="smallModal" data-reveal>
        <h4>Small Modal</h4>
        <p>This is a Small size modal.</p>
        <button class="close-button" data-close aria-label="Close" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>

    <!-- Default modal -->
    <div class="reveal" id="defaultModal" data-reveal>
        <h3>Default Modal</h3>
        <p>This is a default size modal.</p>
        <button class="close-button" data-close aria-label="Close" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>

    <!-- Large modal -->
    <div class="reveal large" id="largeModal" data-reveal>
        <h2>Large Modal</h2>
        <p>This is a Large size modal, suitable for displaying more content.</p>
        <button class="close-button" data-close aria-label="Close" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>

    <!-- Confirm dialog -->
    <div class="reveal small" id="confirmModal" data-reveal>
        <h4>Confirm Delete</h4>
        <p>Are you sure you want to delete this item? This action cannot be undone.</p>
        <div class="button-group float-right">
            <button class="button secondary" data-close>Cancel</button>
            <button class="button alert">Confirm Delete</button>
        </div>
        <button class="close-button" data-close aria-label="Close" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>

    <!-- Form modal -->
    <div class="reveal small" id="formModal" data-reveal>
        <h4>User Login</h4>
        <form>
            <label>
                Username
                <input type="text" placeholder="Enter username">
            </label>
            <label>
                Password
                <input type="password" placeholder="Enter password">
            </label>
            <p><input type="checkbox"> Remember me</p>
            <button class="button expanded" type="submit">Login</button>
        </form>
        <p class="text-center">
            <small>Don't have an account? <a href="#">Register Now</a></small>
        </p>
        <button class="close-button" data-close aria-label="Close" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/js/foundation.min.js"></script>
    <script>$(document).foundation();</script>
</body>
</html>
      1. Provide close method: Always include a close button
      2. Appropriate size: Choose appropriate size based on content
      3. Focus management: Focus to modal when opened
      4. Accessibility: Support keyboard operations

      Summary

      In this chapter we learned modal basic usage, sizes, nesting, and JavaScript API.

      Next chapter, we will learn Foundation Joyride.