Foundation 工具提示与模态框和首页例子

Posted on 9 月 21, 2026 by

Foundation 工具提示与模态框

一、工具提示（Tooltip）

1.1 概述

工具提示用于在用户鼠标悬停时显示简短的辅助说明文字，通过 data-tooltip 属性实现。

1.2 基础用法

<span data-tooltip title="浮动框显示的文字!">鼠标经过这里!</span>Code language: HTML, XML (xml)
属性作用
data-tooltip声明该元素为工具提示触发器
title设置提示文字内容

鼠标悬停在元素上即可显示提示框，移开自动隐藏。

二、模态框（Modal / Reveal）

2.1 概述

模态框（Reveal）是覆盖在页面上方的弹窗组件，适合用于登录框、表单填写、详情展示等场景。

2.2 核心结构

元素类 / 属性作用
触发器data-reveal-id="模态框id"点击打开对应模态框
模态框容器.reveal-modal + data-reveal + id弹窗主体，id 与触发器对应
关闭按钮<a class="close-reveal-modal">点击关闭弹窗（点击遮罩层也可关闭）

2.3 基础模态框

<!-- 触发器 -->
<button type="button" class="button" data-reveal-id="myModal">Click To Open Modal</button>

<!-- 模态框内容 -->
<div id="myModal" class="reveal-modal" data-reveal>
    <h2>Heading in Modal.</h2>
    <p>Some text in the modal.</p>
    <p>Some text in the modal.</p>
    <a class="close-reveal-modal">&times;</a>
</div>Code language: HTML, XML (xml)

2.4 模态框尺寸

在模态框容器上添加尺寸类控制宽度：

类名宽度
.tiny30%
.small40%
.medium60%
.large70%
.xlarge95%
.full100%（全屏宽高）
<div id="myModal" class="reveal-modal small" data-reveal>
    <h2>小尺寸模态框</h2>
    <p>宽度为 40%。</p>
    <a class="close-reveal-modal">&times;</a>
</div>Code language: HTML, XML (xml)

2.5 模态框内嵌表单

<button type="button" class="button" data-reveal-id="addUserModal">添加用户</button>

<div id="addUserModal" class="reveal-modal small" data-reveal>
    <h2>添加用户</h2>
    <fieldset>
        <legend>用户信息</legend>
        <label>Name
            <input type="text" placeholder="First Name..">
        </label>
        <label>Email
            <input type="text" placeholder="Enter email..">
        </label>
    </fieldset>
    <a class="close-reveal-modal">&times;</a>
</div>Code language: HTML, XML (xml)

三、完整可运行示例（Tooltip + Modal）

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Foundation 工具提示与模态框示例</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="foundation-5.5.3/css/foundation.css" rel="stylesheet" />
    <script src="foundation-5.5.3/js/vendor/jquery.js"></script>
    <script src="foundation-5.5.3/js/foundation.min.js"></script>
    <script src="foundation-5.5.3/js/vendor/modernizr.js"></script>
    <script>
        $(document).ready(function () {
            $(document).foundation();
        })
    </script>
</head>
<body>

<div class="row">
    <div class="medium-12 columns">

        <h3>工具提示（Tooltip）</h3>
        <p>
            将鼠标悬停在
            <span data-tooltip title="这是工具提示的文字内容!">这段文字上</span>
            查看效果。
        </p>
        <p>
            <span data-tooltip title="Foundation 5.5.3 前端框架">
                鼠标经过这里显示提示
            </span>
        </p>

        <hr />

        <h3>模态框（Modal / Reveal）</h3>
        <button type="button" class="button" data-reveal-id="myModal">打开模态框</button>
        <button type="button" class="button secondary" data-reveal-id="addUserModal">打开表单模态框</button>

        <!-- 基础模态框 -->
        <div id="myModal" class="reveal-modal" data-reveal>
            <h2>模态框标题</h2>
            <p>这是一个基础的模态框示例。</p>
            <p>点击右上角 × 或点击遮罩层即可关闭。</p>
            <a class="close-reveal-modal">&times;</a>
        </div>

        <!-- 表单模态框 -->
        <div id="addUserModal" class="reveal-modal small" data-reveal>
            <h2>添加用户</h2>
            <fieldset>
                <legend>用户信息</legend>
                <label>姓名
                    <input type="text" placeholder="请输入姓名">
                </label>
                <label>邮箱
                    <input type="text" placeholder="请输入邮箱">
                </label>
            </fieldset>
            <a class="close-reveal-modal">&times;</a>
        </div>

    </div>
</div>

</body>
</html>Code language: HTML, XML (xml)

四、综合实战：Foxdevelop 首页

这是本系列教程的最后一集。我们将前面学到的组件综合运用，搭建一个类似 Foxdevelop 的网站首页，包含顶部导航栏、课程分类按钮组、课程卡片网格布局。

完整代码

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Foxdevelop - 首页</title>
    <meta charset="utf-8" />
    <!-- 移动优先 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 按顺序引入 -->
    <link href="foundation-5.5.3/css/foundation.css" rel="stylesheet" />
    <link href="foundation-icons/foundation-icons.css" rel="stylesheet" />
    <script src="foundation-5.5.3/js/vendor/jquery.js"></script>
    <script src="foundation-5.5.3/js/foundation.min.js"></script>
    <script src="foundation-5.5.3/js/vendor/modernizr.js"></script>
    <script>
        // 初始化 Foundation 组件
        $(document).ready(function () {
            $(document).foundation();
        })
    </script>
    <style>
        body {
            background: #f9f9f9;
        }
        .top-bar {
            margin-bottom: 20px;
        }
        .category-buttons {
            margin: 15px 0;
        }
        .category-buttons .button {
            margin-right: 5px;
            margin-bottom: 5px;
        }
        .course-card {
            background: #fff;
            border: 1px solid #e0e0e0;
            padding: 10px;
            margin-bottom: 20px;
            text-align: center;
            border-radius: 3px;
            transition: box-shadow 0.2s;
        }
        .course-card:hover {
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        }
        .course-card img {
            max-width: 100%;
            height: auto;
            margin-bottom: 10px;
        }
        .course-card h5 {
            margin: 10px 0 5px;
            font-size: 14px;
        }
        .course-card .label {
            margin-top: 5px;
        }
    </style>
</head>
<body>

    <!-- 顶部导航栏 -->
    <div class="row">
        <div class="large-12 columns">
            <nav class="top-bar" data-topbar>
                <ul class="title-area">
                    <li class="name">
                        <h1><a href="#">Foxdevelop</a></h1>
                    </li>
                    <li class="toggle-topbar menu-icon"><a href="#"><span>菜单</span></a></li>
                </ul>

                <section class="top-bar-section">
                    <ul class="left">
                        <li class="active"><a href="#">首页</a></li>
                        <li><a href="#">课程</a></li>
                        <li><a href="#">下载</a></li>
                        <li><a href="#">论坛</a></li>
                    </ul>
                    <ul class="right">
                        <li><a href="#" data-reveal-id="loginModal">登录</a></li>
                        <li><a href="#" data-reveal-id="registerModal">注册</a></li>
                    </ul>
                </section>
            </nav>
        </div>
    </div>

    <!-- 课程分类按钮组 -->
    <div class="row">
        <div class="large-12 columns category-buttons">
            <button type="button" class="button secondary tiny">全部课程</button>
            <button type="button" class="button secondary tiny">.NET</button>
            <button type="button" class="button secondary tiny">JAVA</button>
            <button type="button" class="button secondary tiny">C++</button>
            <button type="button" class="button secondary tiny">PHP</button>
            <button type="button" class="button secondary tiny">Android</button>
            <button type="button" class="button secondary tiny">数据库</button>
            <button type="button" class="button secondary tiny">前端</button>
        </div>
    </div>

    <!-- 课程卡片区域 - 第一行 -->
    <div class="row">
        <div class="large-3 medium-6 columns">
            <div class="course-card">
                <img src="clipboard.png" alt="课程封面" />
                <h5>C# 基础入门教程</h5>
                <span class="label secondary">.NET</span>
            </div>
        </div>
        <div class="large-3 medium-6 columns">
            <div class="course-card">
                <img src="clipboard.png" alt="课程封面" />
                <h5>Java Web 开发实战</h5>
                <span class="label success">JAVA</span>
            </div>
        </div>
        <div class="large-3 medium-6 columns">
            <div class="course-card">
                <img src="clipboard.png" alt="课程封面" />
                <h5>C++ 数据结构与算法</h5>
                <span class="label alert">C++</span>
            </div>
        </div>
        <div class="large-3 medium-6 columns">
            <div class="course-card">
                <img src="clipboard.png" alt="课程封面" />
                <h5>PHP 从零到上线</h5>
                <span class="label warning">PHP</span>
            </div>
        </div>
    </div>

    <!-- 课程卡片区域 - 第二行 -->
    <div class="row">
        <div class="large-3 medium-6 columns">
            <div class="course-card">
                <img src="clipboard.png" alt="课程封面" />
                <h5>Android 应用开发</h5>
                <span class="label">Android</span>
            </div>
        </div>
        <div class="large-3 medium-6 columns">
            <div class="course-card">
                <img src="clipboard.png" alt="课程封面" />
                <h5>MySQL 数据库设计</h5>
                <span class="label info">数据库</span>
            </div>
        </div>
        <div class="large-3 medium-6 columns">
            <div class="course-card">
                <img src="clipboard.png" alt="课程封面" />
                <h5>HTML5 + CSS3 前端基础</h5>
                <span class="label secondary">前端</span>
            </div>
        </div>
        <div class="large-3 medium-6 columns">
            <div class="course-card">
                <img src="clipboard.png" alt="课程封面" />
                <h5>JavaScript 高级编程</h5>
                <span class="label secondary">前端</span>
            </div>
        </div>
    </div>

    <!-- 登录模态框 -->
    <div id="loginModal" class="reveal-modal small" data-reveal>
        <h3>用户登录</h3>
        <form>
            <label>用户名
                <input type="text" placeholder="请输入用户名">
            </label>
            <label>密码
                <input type="password" placeholder="请输入密码">
            </label>
            <button type="button" class="button expand">登录</button>
        </form>
        <a class="close-reveal-modal">&times;</a>
    </div>

    <!-- 注册模态框 -->
    <div id="registerModal" class="reveal-modal small" data-reveal>
        <h3>用户注册</h3>
        <form>
            <label>用户名
                <input type="text" placeholder="请输入用户名">
            </label>
            <label>邮箱
                <input type="email" placeholder="请输入邮箱">
            </label>
            <label>密码
                <input type="password" placeholder="请输入密码">
            </label>
            <button type="button" class="button expand">注册</button>
        </form>
        <a class="close-reveal-modal">&times;</a>
    </div>

</body>
</html>Code language: HTML, XML (xml)

五、使用要点小结

工具提示

功能实现方式
创建提示data-tooltip + title="提示文字"

模态框

功能实现方式
触发器data-reveal-id="模态框id"
模态框容器.reveal-modal + data-reveal + id
关闭按钮<a class="close-reveal-modal">
尺寸控制.tiny / .small / .medium / .large / .xlarge / .full
JS 初始化$(document).foundation()

综合实战所用组件汇总

组件用途
Top Bar顶部导航栏
Button (.secondary .tiny)课程分类筛选
Grid (.row .columns)页面栅格布局
Panel / Card课程卡片
Label分类标签
Modal (Reveal)登录/注册弹窗
Tooltip辅助说明（可扩展）

恭喜！Foundation 5.5.3 系列教程到此全部完结。​ 从字体图标、标签、提醒框、进度条、面板、图片组件、下拉菜单、折叠列表、列表样式、选项卡导航、分页与面包屑、顶部导航栏、Off-Canvas 侧边栏、表单样式与开关、工具提示与模态框，到最终的综合实战首页，你已经掌握了 Foundation 5.5.3 的核心组件体系。

Previous:
Posted in Foundation教程

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注