案例：Foundation案例     状态：可编辑再运行    进入竖版
 运行结果　
​x
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
  <title>Foundation 实例</title>
5
  <meta charset="utf-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1">
7
  <link rel="stylesheet" href="/css/foundation5.5.3/foundation.min.css">
8
  <script src="/js/bootstrap/jquery.min.js"></script>
9
  <script src="/js/foundation5.5.3/foundation.min.js"></script>
10
  <script src="/js/foundation5.5.3/modernizr.js"></script>
11
</head>
12
​
13
<body>
14
​
15
<div style="padding:20px;">
16
  <h2>模态框大小</h2>
17
  <p>使用以下类来修改模态框大小:</p>
18
  <ul>
19
    <li><code>.tiny</code>: 设置宽度为 30%</li>
20
    <li><code>.small</code>: 设置宽度为 40%</li>
21
    <li><code>.medium</code>: 设置宽度为 60%</li>
22
    <li><code>.large</code>: 设置宽度为 70%</li>
23
    <li><code>.xlarge</code>: 设置宽度为 95%</li>
24
    <li><code>.full</code>: 设置宽度喝高度为 100%</li>
25
  </ul>
26
27
  <button type="button" class="button" data-reveal-id="myModal">打开小个模态框</button>
28
29
  <div id="myModal" class="reveal-modal tiny" data-reveal>
30
    <h2>小个模态框</h2>
31
    <p>这是一个小个模态框。尝试使用不同的类来修改模态框大小。</p>
32
    <a class="close-reveal-modal">&times;</a>
33
  </div>
34
</div>
35
​
36
<script>
37
$(document).ready(function() {
38
    $(document).foundation();
39
})
40
</script>
41
​
42
</body>
43
</html>
44
​