Foundation 模态框

前言

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

1、模态框

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

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

• 模态框需要使用 JavaScript。所以需要初始化 Foundation JS:

• 实例

  <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">&times;</a>
  </div>
  
  <!-- 初始化 Foundation JS -->
  <script>
       $(document).ready(function () {
          $(document).foundation();
       })
  </script>

• 效果 🔗

  

2、模态框大小

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

类	宽度
.tiny	30% 宽度
.small	40% 宽度
.medium	60% 宽度
.large	70% 宽度
.xlarge	95% 宽度
.full	100% 宽度和高度

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

• 实例

  <button type="button" class="button" data-reveal-id="myModal">打开小个模态框</button>
  <div id="myModal" class="reveal-modal medium" data-reveal>
      <h2>小个模态框</h2>
      <p>这是一个小个模态框。尝试使用不同的类来修改模态框大小。</p>
      <a class="close-reveal-modal">&times;</a>
  </div>
  
  <!-- 初始化 Foundation JS -->
  <script>
       $(document).ready(function () {
          $(document).foundation();
       })
  </script>

• 效果 🔗

  

3、内嵌模态框

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

• 第二个模态框会取代第一个模态框。

• 实例

  <!-- 触发模态框 -->
  <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">&times;</a>
  </div>
  
  <!-- 第二个模态框 -->
  <div id="secondModal" class="reveal-modal" data-reveal>
      <h2>第二个模态框</h2>
      <p>第二个模态框，第一个模态框已关闭。</p>
      <p>Foundation 让新的模态框取代了第一个模态框。</p>
      <a class="close-reveal-modal">&times;</a>
  </div>
  
  <!-- 初始化 Foundation JS -->
  <script>
       $(document).ready(function () {
          $(document).foundation();
       })
  </script>

• 效果 🔗

    

3.1 同时打开多个模态框

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

• 实例

  <!-- 触发模态框 -->
  <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">&times;</a>
  </div>
  
  <!-- 第二个模态框 -->
  <div id="secondModal" class="reveal-modal" data-reveal data-options="multiple_opened: true;">
      <h2>第二个模态框</h2>
      <p>第二个模态框，第一个模态在第二个模态框下面，并没有关闭。</p>
      <a class="close-reveal-modal">&times;</a>
  </div>
  
  <!-- 初始化 Foundation JS -->
  <script>
       $(document).ready(function () {
          $(document).foundation();
       })
  </script>

• 效果 🔗