垦荒学园

简体中文

English

简体中文

English

切换主题

Foundation 模态框 ​

Foundation 模态框（Reveal）是一个弹出式对话框组件。本章将介绍模态框的各种用法。

基本模态框 ​

html
<!-- 触发按钮 -->
<button class="button" data-open="exampleModal">打开模态框</button>

<!-- 模态框 -->
<div class="reveal" id="exampleModal" data-reveal>
    <h1>模态框标题</h1>
    <p>这是模态框的内容。</p>
    <button class="close-button" data-close aria-label="关闭" type="button">
        <span aria-hidden="true">&times;</span>
    </button>
</div>

模态框尺寸 ​

html
<!-- Tiny -->
<div class="reveal tiny" id="tinyModal" data-reveal>内容</div>

<!-- Small -->
<div class="reveal small" id="smallModal" data-reveal>内容</div>

<!-- 默认 -->
<div class="reveal" id="defaultModal" data-reveal>内容</div>

<!-- Large -->
<div class="reveal large" id="largeModal" data-reveal>内容</div>

<!-- Full -->
<div class="reveal full" id="fullModal" data-reveal>内容</div>

无遮罩模态框 ​

html
<div class="reveal" id="noOverlayModal" data-reveal data-overlay="false">
    内容
</div>

嵌套模态框 ​

html
<div class="reveal" id="parentModal" data-reveal>
    <h1>父模态框</h1>
    <button class="button" data-open="childModal">打开子模态框</button>
</div>

<div class="reveal" id="childModal" data-reveal>
    <h1>子模态框</h1>
    <button class="button" data-close>关闭</button>
</div>

配置选项 ​

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">
    内容
</div>
选项说明默认值
data-close-on-click点击遮罩关闭true
data-close-on-escESC 键关闭true
data-overlay显示遮罩true
data-animation-in进入动画-
data-animation-out退出动画-

JavaScript API ​

javascript
// 打开模态框
$('#myModal').foundation('open');

// 关闭模态框
$('#myModal').foundation('close');

// 事件
$('#myModal').on('open.zf.reveal', function() {
    console.log('模态框已打开');
});

$('#myModal').on('closed.zf.reveal', function() {
    console.log('模态框已关闭');
});

完整示例 ​

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">
    <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 模态框展示</h1>

        <div class="demo-section">
            <h3>基本模态框</h3>
            <button class="button" data-open="basicModal">打开模态框</button>
        </div>

        <div class="demo-section">
            <h3>不同尺寸</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>确认对话框</h3>
            <button class="button alert" data-open="confirmModal">删除项目</button>
        </div>

        <div class="demo-section">
            <h3>表单模态框</h3>
            <button class="button" data-open="formModal">登录</button>
        </div>
    </div>

    <!-- 基本模态框 -->
    <div class="reveal" id="basicModal" data-reveal>
        <h1>欢迎</h1>
        <p class="lead">这是一个基本的模态框示例。</p>
        <p>你可以在这里放置任何内容。</p>
        <button class="close-button" data-close aria-label="关闭" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>

    <!-- Tiny 模态框 -->
    <div class="reveal tiny" id="tinyModal" data-reveal>
        <p>这是一个 Tiny 尺寸的模态框。</p>
        <button class="close-button" data-close aria-label="关闭" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>

    <!-- Small 模态框 -->
    <div class="reveal small" id="smallModal" data-reveal>
        <h4>Small 模态框</h4>
        <p>这是一个 Small 尺寸的模态框。</p>
        <button class="close-button" data-close aria-label="关闭" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>

    <!-- Default 模态框 -->
    <div class="reveal" id="defaultModal" data-reveal>
        <h3>Default 模态框</h3>
        <p>这是默认尺寸的模态框。</p>
        <button class="close-button" data-close aria-label="关闭" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>

    <!-- Large 模态框 -->
    <div class="reveal large" id="largeModal" data-reveal>
        <h2>Large 模态框</h2>
        <p>这是一个 Large 尺寸的模态框，适合显示更多内容。</p>
        <button class="close-button" data-close aria-label="关闭" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>

    <!-- 确认对话框 -->
    <div class="reveal small" id="confirmModal" data-reveal>
        <h4>确认删除</h4>
        <p>您确定要删除这个项目吗？此操作不可撤销。</p>
        <div class="button-group float-right">
            <button class="button secondary" data-close>取消</button>
            <button class="button alert">确认删除</button>
        </div>
        <button class="close-button" data-close aria-label="关闭" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>

    <!-- 表单模态框 -->
    <div class="reveal small" id="formModal" data-reveal>
        <h4>用户登录</h4>
        <form>
            <label>
                用户名
                <input type="text" placeholder="请输入用户名">
            </label>
            <label>
                密码
                <input type="password" placeholder="请输入密码">
            </label>
            <p><input type="checkbox"> 记住我</p>
            <button class="button expanded" type="submit">登录</button>
        </form>
        <p class="text-center">
            <small>还没有账号？<a href="#">立即注册</a></small>
        </p>
        <button class="close-button" data-close aria-label="关闭" type="button">
            <span aria-hidden="true">&times;</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>

模态框最佳实践 ​

  1. 提供关闭方式：始终包含关闭按钮
  2. 合适的尺寸：根据内容选择合适的尺寸
  3. 焦点管理：打开时聚焦到模态框
  4. 可访问性：支持键盘操作

总结 ​

本章我们学习了模态框的基本用法、尺寸、嵌套和 JavaScript API。

下一章，我们将学习 Foundation Joyride。