Foundation 模态框（Reveal / Modal）详解（超级完整版，一次讲透）
我们继续你的 Foundation 系列，今天把 模态框（Reveal）讲得明明白白！Foundation 6+ 中的 Reveal 是最强大的模态窗口组件，用于弹出对话框、登录表单、图片放大、确认提示等。支持动画、多种尺寸、全屏模式、嵌套内容、键盘 ESC 关闭、无障碍访问，移动端完美！
1. 基本结构（最简单写法）
<!-- 触发按钮 -->
<button class="button" data-open="exampleModal">打开模态框</button>
<!-- 模态框内容 -->
<div class="reveal" id="exampleModal" data-reveal>
<h3>模态框标题</h3>
<p>这里可以放任何内容：文字、表单、图片、视频...</p>
<button class="close-button" data-close aria-label="关闭模态框" type="button">
<span aria-hidden="true">×</span>
</button>
</div>2. 尺寸变体（超级实用）
添加尺寸类到 .reveal：
<div class="reveal tiny" id="tinyModal" data-reveal>...</div> <!-- 超小 -->
<div class="reveal small" id="smallModal" data-reveal>...</div> <!-- 小 -->
<div class="reveal large" id="largeModal" data-reveal>...</div> <!-- 大 -->
<div class="reveal full" id="fullModal" data-reveal>...</div> <!-- 全屏（移动端推荐） -->3. 高级选项
- 无遮罩层：
data-overlay="false" - 动画效果：默认淡入淡出，支持自定义
- 嵌套模态：直接在模态里放另一个
data-open - 自动聚焦：默认聚焦第一个输入框
4. 今天直接给你抄的完整代码（复制就能跑）
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.8.1/dist/css/foundation.min.css">
</head>
<body>
<h3>Foundation Reveal 模态框全家福</h3>
<!-- 触发按钮们 -->
<button class="button" data-open="basicModal">基本模态框</button>
<button class="button success" data-open="largeModal">大尺寸模态框</button>
<button class="button alert" data-open="fullModal">全屏模态框</button>
<!-- 基本模态框 -->
<div class="reveal" id="basicModal" data-reveal>
<h4>欢迎！</h4>
<p>这是一个标准模态框，支持 ESC 关闭或点×。</p>
<button class="close-button" data-close>×</button>
</div>
<!-- 大尺寸 + 表单示例 -->
<div class="reveal large" id="largeModal" data-reveal>
<h4>登录表单</h4>
<form>
<label>用户名 <input type="text"></label>
<label>密码 <input type="password"></label>
<button class="button">登录</button>
</form>
<button class="close-button" data-close>×</button>
</div>
<!-- 全屏模态框 -->
<div class="reveal full" id="fullModal" data-reveal data-options="closeOnBackgroundClick:false;">
<h4>全屏模式（点背景不关闭）</h4>
<p>适合图片查看或复杂内容。</p>
<button class="close-button" data-close>×</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.8.1/dist/js/foundation.min.js"></script>
<script>$(document).foundation();</script>
</body>
</html>下面给你看真实效果（官方演示和项目中最标准的 Foundation Reveal 模态框示例）：
官方文档（最新版）：https://get.foundation/sites/docs/reveal.html
你现在想干嘛？
→ 明天终于讲 Foundation 表格（Table）？
→ 帮我做一个图片放大查看的 Reveal 模态框？
→ 给我一个确认删除的警告模态框代码？
直接回复下一句：
“明天讲 table”
“帮我做图片模态”
“给我删除确认框”
我立刻给你写好！
