MiniMax H3模型本地部署指南：Sol Engine加速与API集成实战
2026/8/13 8:19:52
Foundation 模态框（Reveal / Modal）详解（超级完整版，一次讲透）
我们继续你的 Foundation 系列，今天把模态框（Reveal）讲得明明白白！Foundation 6+ 中的 Reveal 是最强大的模态窗口组件，用于弹出对话框、登录表单、图片放大、确认提示等。支持动画、多种尺寸、全屏模式、嵌套内容、键盘 ESC 关闭、无障碍访问，移动端完美！
1. 基本结构（最简单写法）
<!-- 触发按钮 --><buttonclass="button"data-open="exampleModal">打开模态框</button><!-- 模态框内容 --><divclass="reveal"id="exampleModal"data-reveal><h3>模态框标题</h3><p>这里可以放任何内容：文字、表单、图片、视频...</p><buttonclass="close-button"data-closearia-label="关闭模态框"type="button"><spanaria-hidden="true">×</span></button></div>2. 尺寸变体（超级实用）
添加尺寸类到.reveal：
<divclass="reveal tiny"id="tinyModal"data-reveal>...</div><!-- 超小 --><divclass="reveal small"id="smallModal"data-reveal>...</div><!-- 小 --><divclass="reveal large"id="largeModal"data-reveal>...</div><!-- 大 --><divclass="reveal full"id="fullModal"data-reveal>...</div><!-- 全屏（移动端推荐） -->3. 高级选项
- 无遮罩层：
data-overlay="false" - 动画效果：默认淡入淡出，支持自定义
- 嵌套模态：直接在模态里放另一个
data-open - 自动聚焦：默认聚焦第一个输入框
4. 今天直接给你抄的完整代码（复制就能跑）
<!DOCTYPEhtml><html><head><linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/foundation-sites@6.8.1/dist/css/foundation.min.css"></head><body><h3>Foundation Reveal 模态框全家福</h3><!-- 触发按钮们 --><buttonclass="button"data-open="basicModal">基本模态框</button><buttonclass="button success"data-open="largeModal">大尺寸模态框</button><buttonclass="button alert"data-open="fullModal">全屏模态框</button><!-- 基本模态框 --><divclass="reveal"id="basicModal"data-reveal><h4>欢迎！</h4><p>这是一个标准模态框，支持 ESC 关闭或点×。</p><buttonclass="close-button"data-close>×</button></div><!-- 大尺寸 + 表单示例 --><divclass="reveal large"id="largeModal"data-reveal><h4>登录表单</h4><form><label>用户名<inputtype="text"></label><label>密码<inputtype="password"></label><buttonclass="button">登录</button></form><buttonclass="close-button"data-close>×</button></div><!-- 全屏模态框 --><divclass="reveal full"id="fullModal"data-revealdata-options="closeOnBackgroundClick:false;"><h4>全屏模式（点背景不关闭）</h4><p>适合图片查看或复杂内容。</p><buttonclass="close-button"data-close>×</button></div><scriptsrc="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script><scriptsrc="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”
“帮我做图片模态”
“给我删除确认框”
我立刻给你写好！