垦荒学园

简体中文

English

简体中文

English

切换主题

Foundation 提醒框 ​

Foundation 提醒框（Callout）用于向用户显示重要信息、警告或通知。本章将详细介绍 Foundation 提醒框的各种用法。

基本提醒框 ​

使用 .callout 类创建基本提醒框：

html
<div class="callout">
    <h5>这是一个提醒框</h5>
    <p>这里是提醒框的内容。可以包含任何 HTML 元素。</p>
</div>

提醒框颜色 ​

Foundation 提供了多种颜色的提醒框：

html
<!-- Primary 提醒框 -->
<div class="callout primary">
    <h5>主要信息</h5>
    <p>这是一条主要信息提醒。</p>
</div>

<!-- Secondary 提醒框 -->
<div class="callout secondary">
    <h5>次要信息</h5>
    <p>这是一条次要信息提醒。</p>
</div>

<!-- Success 提醒框 -->
<div class="callout success">
    <h5>操作成功</h5>
    <p>您的操作已成功完成！</p>
</div>

<!-- Warning 提醒框 -->
<div class="callout warning">
    <h5>警告</h5>
    <p>请注意，此操作可能会产生影响。</p>
</div>

<!-- Alert 提醒框 -->
<div class="callout alert">
    <h5>错误</h5>
    <p>操作失败，请重试。</p>
</div>

颜色用途说明 ​

类名颜色用途
（默认）浅灰一般信息
.primary蓝色主要信息、提示
.secondary灰色次要信息
.success绿色成功消息、确认
.warning黄色警告、需要注意
.alert红色错误、危险操作

可关闭的提醒框 ​

添加 data-closable 属性和关闭按钮：

html
<div class="callout" data-closable>
    <h5>可关闭的提醒框</h5>
    <p>点击右侧的 × 按钮关闭此提醒框。</p>
    <button class="close-button" aria-label="关闭提醒框" type="button" data-close>
        <span aria-hidden="true">&times;</span>
    </button>
</div>

带动画的关闭 ​

使用 data-closable="slide-out-right" 添加滑出动画：

html
<div class="callout success" data-closable="slide-out-right">
    <h5>带动画的关闭</h5>
    <p>关闭时会有滑出动画效果。</p>
    <button class="close-button" aria-label="关闭提醒框" type="button" data-close>
        <span aria-hidden="true">&times;</span>
    </button>
</div>

可用的动画效果：

  • slide-out-right - 向右滑出
  • slide-out-left - 向左滑出
  • slide-out-up - 向上滑出
  • slide-out-down - 向下滑出
  • fade-out - 淡出

提醒框尺寸 ​

小型提醒框 ​

html
<div class="callout small">
    <p>这是一个小型提醒框，padding 更小。</p>
</div>

大型提醒框 ​

html
<div class="callout large">
    <h4>大型提醒框</h4>
    <p>这是一个大型提醒框，有更多的 padding。</p>
</div>

带图标的提醒框 ​

结合图标增强视觉效果：

html
<div class="callout primary">
    <div class="grid-x grid-padding-x">
        <div class="cell shrink">
            <i class="fi-info" style="font-size: 24px;"></i>
        </div>
        <div class="cell auto">
            <h5>提示信息</h5>
            <p>这是一条带图标的提示信息。</p>
        </div>
    </div>
</div>

<div class="callout success">
    <div class="grid-x grid-padding-x">
        <div class="cell shrink">
            <i class="fi-check" style="font-size: 24px;"></i>
        </div>
        <div class="cell auto">
            <h5>操作成功</h5>
            <p>您的更改已保存。</p>
        </div>
    </div>
</div>

<div class="callout warning">
    <div class="grid-x grid-padding-x">
        <div class="cell shrink">
            <i class="fi-alert" style="font-size: 24px;"></i>
        </div>
        <div class="cell auto">
            <h5>警告</h5>
            <p>此操作不可撤销，请谨慎操作。</p>
        </div>
    </div>
</div>

<div class="callout alert">
    <div class="grid-x grid-padding-x">
        <div class="cell shrink">
            <i class="fi-x" style="font-size: 24px;"></i>
        </div>
        <div class="cell auto">
            <h5>错误</h5>
            <p>无法连接到服务器，请稍后重试。</p>
        </div>
    </div>
</div>

自定义提醒框样式 ​

边框提醒框 ​

html
<style>
    .callout.bordered {
        background: transparent;
        border-left: 4px solid;
    }
    .callout.bordered.primary { border-left-color: #1779ba; }
    .callout.bordered.success { border-left-color: #3adb76; }
    .callout.bordered.warning { border-left-color: #ffae00; }
    .callout.bordered.alert { border-left-color: #cc4b37; }
</style>

<div class="callout bordered primary">
    <p>这是一个带左边框的提醒框。</p>
</div>

圆角提醒框 ​

html
<style>
    .callout.rounded {
        border-radius: 10px;
    }
</style>

<div class="callout success rounded">
    <p>这是一个圆角提醒框。</p>
</div>

提醒框中的其他元素 ​

带按钮的提醒框 ​

html
<div class="callout warning">
    <h5>确认操作</h5>
    <p>您确定要删除这个项目吗？此操作不可撤销。</p>
    <div class="button-group">
        <a class="button alert">确认删除</a>
        <a class="button secondary">取消</a>
    </div>
</div>

带列表的提醒框 ​

html
<div class="callout alert">
    <h5>表单验证错误</h5>
    <p>请修正以下错误：</p>
    <ul>
        <li>用户名不能为空</li>
        <li>密码长度必须至少 8 位</li>
        <li>邮箱格式不正确</li>
    </ul>
</div>

带链接的提醒框 ​

html
<div class="callout primary">
    <h5>新功能上线</h5>
    <p>我们刚刚发布了新的仪表板功能！</p>
    <p><a href="#">立即查看 &raquo;</a></p>
</div>

通知栏样式 ​

创建页面顶部通知栏：

html
<style>
    .notification-bar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        margin: 0;
        border-radius: 0;
        text-align: center;
    }
</style>

<div class="callout primary notification-bar" data-closable>
    <p style="margin: 0;">
        <strong>公告：</strong>系统将于今晚 22:00 进行维护，届时服务将暂停 30 分钟。
        <button class="close-button" aria-label="关闭通知" type="button" data-close>
            <span aria-hidden="true">&times;</span>
        </button>
    </p>
</div>

JavaScript 控制 ​

动态创建提醒框 ​

javascript
function showAlert(type, title, message) {
    var alertHtml = `
        <div class="callout ${type}" data-closable>
            <h5>${title}</h5>
            <p>${message}</p>
            <button class="close-button" aria-label="关闭" type="button" data-close>
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    `;

    $('#alert-container').append(alertHtml);
    $(document).foundation();
}

// 使用示例
showAlert('success', '成功', '操作已完成！');
showAlert('alert', '错误', '出现了一些问题。');

自动消失的提醒框 ​

javascript
function showAutoCloseAlert(type, message, duration) {
    var id = 'alert-' + Date.now();
    var alertHtml = `
        <div id="${id}" class="callout ${type}" data-closable>
            <p>${message}</p>
        </div>
    `;

    $('#alert-container').append(alertHtml);
    $(document).foundation();

    setTimeout(function() {
        $('#' + id).fadeOut(function() {
            $(this).remove();
        });
    }, duration || 3000);
}

// 3秒后自动消失
showAutoCloseAlert('success', '保存成功！', 3000);

完整示例 ​

html
<!DOCTYPE html>
<html class="no-js" lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation 提醒框示例</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css">
    <style>
        .demo-section {
            margin-bottom: 30px;
        }
        .demo-section h3 {
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #ddd;
        }
        .callout.bordered {
            background: #fff;
            border: 1px solid #ddd;
            border-left: 4px solid;
        }
        .callout.bordered.primary { border-left-color: #1779ba; }
        .callout.bordered.success { border-left-color: #3adb76; }
        .callout.bordered.warning { border-left-color: #ffae00; }
        .callout.bordered.alert { border-left-color: #cc4b37; }

        .icon-callout {
            display: flex;
            align-items: flex-start;
            gap: 15px;
        }
        .icon-callout i {
            font-size: 28px;
            flex-shrink: 0;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <h1>Foundation 提醒框展示</h1>

        <div class="demo-section">
            <h3>基本提醒框颜色</h3>

            <div class="callout">
                <p>这是默认的提醒框样式。</p>
            </div>

            <div class="callout primary">
                <h5>主要信息</h5>
                <p>这是一条主要信息提醒。</p>
            </div>

            <div class="callout secondary">
                <h5>次要信息</h5>
                <p>这是一条次要信息提醒。</p>
            </div>

            <div class="callout success">
                <h5>操作成功</h5>
                <p>您的操作已成功完成！</p>
            </div>

            <div class="callout warning">
                <h5>警告</h5>
                <p>请注意，此操作可能会产生影响。</p>
            </div>

            <div class="callout alert">
                <h5>错误</h5>
                <p>操作失败，请重试。</p>
            </div>
        </div>

        <div class="demo-section">
            <h3>可关闭的提醒框</h3>

            <div class="callout success" data-closable>
                <p>点击右侧的 × 按钮关闭此提醒框。</p>
                <button class="close-button" aria-label="关闭提醒框" type="button" data-close>
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div class="callout warning" data-closable="slide-out-right">
                <p>关闭时带有滑出动画效果。</p>
                <button class="close-button" aria-label="关闭提醒框" type="button" data-close>
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        </div>

        <div class="demo-section">
            <h3>带图标的提醒框</h3>

            <div class="callout primary">
                <div class="icon-callout">
                    <i class="fi-info"></i>
                    <div>
                        <h5>提示信息</h5>
                        <p>这是一条带图标的提示信息。</p>
                    </div>
                </div>
            </div>

            <div class="callout success">
                <div class="icon-callout">
                    <i class="fi-check"></i>
                    <div>
                        <h5>操作成功</h5>
                        <p>您的更改已保存。</p>
                    </div>
                </div>
            </div>

            <div class="callout warning">
                <div class="icon-callout">
                    <i class="fi-alert"></i>
                    <div>
                        <h5>注意</h5>
                        <p>此操作不可撤销，请谨慎操作。</p>
                    </div>
                </div>
            </div>

            <div class="callout alert">
                <div class="icon-callout">
                    <i class="fi-x"></i>
                    <div>
                        <h5>错误</h5>
                        <p>无法连接到服务器，请稍后重试。</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="demo-section">
            <h3>边框样式</h3>

            <div class="callout bordered primary">
                <p>Primary 边框样式提醒框。</p>
            </div>

            <div class="callout bordered success">
                <p>Success 边框样式提醒框。</p>
            </div>

            <div class="callout bordered warning">
                <p>Warning 边框样式提醒框。</p>
            </div>

            <div class="callout bordered alert">
                <p>Alert 边框样式提醒框。</p>
            </div>
        </div>

        <div class="demo-section">
            <h3>带按钮的提醒框</h3>

            <div class="callout warning">
                <h5>确认操作</h5>
                <p>您确定要删除这个项目吗？此操作不可撤销。</p>
                <div class="button-group small">
                    <a class="button alert">确认删除</a>
                    <a class="button secondary">取消</a>
                </div>
            </div>
        </div>

        <div class="demo-section">
            <h3>表单验证错误</h3>

            <div class="callout alert">
                <h5>表单验证错误</h5>
                <p>请修正以下错误后重新提交：</p>
                <ul>
                    <li>用户名不能为空</li>
                    <li>密码长度必须至少 8 位</li>
                    <li>邮箱格式不正确</li>
                </ul>
            </div>
        </div>

        <div id="alert-container"></div>

        <div class="demo-section">
            <h3>动态提醒框</h3>
            <button class="button success" onclick="showAlert('success', '成功', '操作已完成！')">显示成功提醒</button>
            <button class="button alert" onclick="showAlert('alert', '错误', '出现了一些问题。')">显示错误提醒</button>
            <button class="button warning" onclick="showAlert('warning', '警告', '请注意此操作。')">显示警告提醒</button>
        </div>
    </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();

        function showAlert(type, title, message) {
            var alertHtml = `
                <div class="callout ${type}" data-closable>
                    <h5>${title}</h5>
                    <p>${message}</p>
                    <button class="close-button" aria-label="关闭" type="button" data-close>
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            `;
            $('#alert-container').prepend(alertHtml);
            $(document).foundation();
        }
    </script>
</body>
</html>

提醒框最佳实践 ​

  1. 颜色语义化：使用合适的颜色传达信息类型
  2. 简洁明了：提醒信息应该简短、清晰
  3. 可关闭性：非关键提醒应该允许用户关闭
  4. 位置一致：在整个应用中保持提醒框位置的一致性
  5. 可访问性：使用合适的 ARIA 属性
html
<!-- 好的实践 -->
<div class="callout success" role="alert" aria-live="polite" data-closable>
    <p>您的更改已保存。</p>
    <button class="close-button" aria-label="关闭提醒" type="button" data-close>
        <span aria-hidden="true">&times;</span>
    </button>
</div>

总结 ​

本章我们学习了：

  • 基本提醒框的创建
  • 不同颜色的提醒框
  • 可关闭和带动画的提醒框
  • 带图标和自定义样式的提醒框
  • 动态创建和自动消失的提醒框
  • 提醒框的最佳实践

下一章，我们将学习 Foundation 进度条。

提示：提醒框是与用户沟通的重要方式，确保信息清晰、及时，但也要避免过度打扰用户。