Foundation Modal
Foundation Modal (Reveal) is a popup dialog component. This chapter covers various uses of modal components.
Basic Modal
html
<!-- 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">×</span>
</button>
</div>Modal Sizes
html
<!-- 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
html
<div class="reveal" id="noOverlayModal" data-reveal data-overlay="false">
Content
</div>Nested Modals
html
<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
html
<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>| Option | Description | Default |
|---|---|---|
data-close-on-click | Close on overlay click | true |
data-close-on-esc | ESC key close | true |
data-overlay | Show overlay | true |
data-animation-in | Enter animation | - |
data-animation-out | Exit animation | - |
JavaScript API
javascript
// 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
html
<!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">×</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">×</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">×</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">×</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">×</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">×</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">×</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>Modal Best Practices
- Provide close method: Always include a close button
- Appropriate size: Choose appropriate size based on content
- Focus management: Focus to modal when opened
- 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.