首页 > 教程 > Foundation 教程

Foundation 模态框

Foundation 模态框

模态框是一个显示在页面头部的弹窗。

我们可以在容器元素上(如 <div id="myModal")使用唯一 ID，并添加 .reveal-modal 类和 data-reveal 属性来添加模态框。我们可以在任何元素上使用 data-reveal-id="id" 属性阿里打开模态框。  id 必须与容器 id 一致(实例为 "myModal")。

如果你希望在点击模态框之外的区域来关闭模态框。你可以在模态框的关闭按钮  <a> 标签上添加 .close-reveal-modal 类来实现。

注意: 滑块需要使用 JavaScript。所以你需要初始化 oundation JS:

实例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>

<body style="padding:20px;">

<div style="padding:20px;">
  <h2>模态框</h2>
  <p>模态框是一个显示在页面头部的弹窗。</p>
  <button type="button" class="button" data-reveal-id="myModal">点我打开模态框</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">×</a>
  </div>
</div>

<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

</body>
</html>

模态框大小

可以在模态框容器上添加以下类来设置模态框的大小：

  • .tiny: 30% 宽度

  • .small: 40% 宽度

  • .medium: 60% 宽度

  • .large: 70% 宽度

  • .xlarge: 95% 宽度

  • .full: 100% 宽度和高度

注意: 在平板、笔记本、PC 电脑上默认为 80% 宽度，在小屏幕设备上是 100% 宽度。

实例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>

<body>

<div style="padding:20px;">
  <h2>模态框大小</h2>
  <p>使用以下类来修改模态框大小:</p>
  <ul>
    <li><code>.tiny</code>: 设置宽度为 30%</li>
    <li><code>.small</code>: 设置宽度为 40%</li>
    <li><code>.medium</code>: 设置宽度为 60%</li>
    <li><code>.large</code>: 设置宽度为 70%</li>
    <li><code>.xlarge</code>: 设置宽度为 95%</li>
    <li><code>.full</code>: 设置宽度喝高度为 100%</li>
  </ul>
  
  <button type="button" class="button" data-reveal-id="myModal">打开小个模态框</button>
  
  <div id="myModal" class="reveal-modal tiny" data-reveal>
    <h2>小个模态框</h2>
    <p>这是一个小个模态框。尝试使用不同的类来修改模态框大小。</p>
    <a class="close-reveal-modal">×</a>
  </div>
</div>

<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

</body>
</html>

内嵌模态框

你可以在模态框内嵌入模态框，可以在第一个模态框上添加新的触发按钮。你必须为内嵌模态框设置一个唯一的 id：

实例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>

<body>

<div style="padding:20px;">
  <h2>内嵌模态框</h2>
  <!-- 触发模态框 -->
  <button type="button" class="button" data-reveal-id="myModal">点击打开模态框</button>

  <!-- 第一个模态框 -->
  <div id="myModal" class="reveal-modal" data-reveal>
    <h2>第一个模态框</h2>
    <p>点击以下按钮会打开一个新的模态框。如果打开新的模态框，那么第一个模态框就会被关闭。</p>
    <p><a href="#" data-reveal-id="secondModal" class="button success">打开第二个模态框</a></p>
    <a class="close-reveal-modal">×</a>
  </div>

  <!-- 第二个模态框 -->
  <div id="secondModal" class="reveal-modal" data-reveal>
    <h2>第二个模态框</h2>
    <p>第二个模态框，第一个模态框已关闭。</p>
    <p>Foundation 让新的模态框取代了第一个模态框。</p>
    <a class="close-reveal-modal">×</a>
  </div>
</div>

<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

</body>
</html>

第二个模态框会取代第一个模态框。如果你希望在打开第二个模态框时，不关闭第一个模态框。可以在第二个模态框上添加 data-options="multiple_opened:true;" 属性：

实例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>

<body>
<div style="padding:20px;">
  <h2>内嵌模态框</h2>
  <!-- 触发模态框 -->
  <button type="button" class="button" data-reveal-id="myModal">点击打开模态框</button>

  <!-- 第一个模态框 -->
  <div id="myModal" class="reveal-modal" data-reveal>
    <h2>第一个模态框</h2>
    <p>点击以下按钮会打开一个新的模态框。如果打开新的模态框，那么第一个模态框就会被关闭。</p>
    <p><a href="#" data-reveal-id="secondModal" class="button success" style="text-decoration:none;">打开第二个模态框</a></p>
    <a class="close-reveal-modal">×</a>
  </div>

  <!-- 第二个模态框 -->
  <div id="secondModal" class="reveal-modal" data-reveal data-options="multiple_opened:true;">
    <h2>第二个模态框</h2>
    <p>第二个模态框，第一个模态在第二个模态框下面，并没有关闭。</p>
   
    <a class="close-reveal-modal">×</a>
  </div>
</div>

<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

</body>
</html>