Foundation for Sites6.8.1 更新日志
组件列表

显示

JavaScript Motion UI

模态对话框或弹出窗口，对于原型设计和生产都非常方便。Foundation 包括 Reveal（我们的 jQuery 模态插件），可以轻松实现这一点。

基础知识

模态框只是一个空容器，因此您可以在其中放置任何类型的内容，从文本到表单、视频，甚至是整个网格。

请注意，我们在 Foundation 6 中删除了 AJAX 加载模态框的选项。不过，我们已经让您自己实现它变得非常容易，请查看高级部分中的示例。

要创建模态框，请将类 .reveal、属性 data-reveal 和唯一 ID 添加到容器中。

在视频中观看此部分

edit on codepen button 
<div class="reveal" id="exampleModal1" data-reveal>
  <h1>Awesome. I Have It.</h1>
  <p class="lead">Your couch. It is mine.</p>
  <p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
  <button class="close-button" data-close aria-label="Close modal" type="button">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

太棒了。我已经掌握了。

你的沙发。它现在是我的了。

我是一个很酷的段落，生活在一个更酷的模态框里。赢了！

您还需要一种打开模态框的方法。将属性 data-open 添加到任何元素。data-open 的值应该是模态框的 ID。

<p><button class="button" data-open="exampleModal1">Click me for a modal</button></p>

您还需要一种从内部_关闭_模态框的方法。默认情况下，如果在模态框外部单击或按下 esc 键，模态框将关闭。但是，您通常还需要添加自己的点击触发器。将属性 data-close 添加到模态框中的任何元素以添加一个触发器。

您可以使用我们方便的 关闭按钮 样式来完成此操作

<button class="close-button" data-close aria-label="Close modal" type="button">
  <span aria-hidden="true">&times;</span>
</button>

尺寸调整

在小屏幕上，模态框始终是屏幕宽度的 100%。在中等大小的屏幕及更大屏幕上，宽度变为 600 像素（请参阅 $reveal-width 设置）。

可以使用以下尺寸调整类来更改模态框的大小，这些类将添加到模态框容器中

  • .tiny：宽度为 30%
  • .small：宽度为 50%
  • .large：宽度为 90%
  • .full：宽度和高度均为 100%，默认情况下 escClose 选项为 true，并创建一个关闭按钮。

在视频中观看此部分

edit on codepen button 
<div class="tiny reveal" id="exampleModal" data-reveal>
  <!-- ... -->
</div>

哦，我太小了

我可能很小，但我的心很大！

我很大，像熊一样！

嵌套模态框

模态框可以打开其他模态框。使用唯一 ID 创建第二个模态框，然后在第一个模态框中添加一个带有 data-open 的点击触发器。

edit on codepen button 
<p><button class="button" data-open="exampleModal2">Click me for a modal</button></p>

<!-- This is the first modal -->
<div class="reveal" id="exampleModal2" data-reveal>
  <h1>Awesome!</h1>
  <p class="lead">I have another modal inside of me!</p>
  <button class="button" data-open="exampleModal3">Click me for another modal!</button>
  <button class="close-button" data-close aria-label="Close reveal" type="button">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

<!-- This is the nested modal -->
<div class="reveal" id="exampleModal3" data-reveal>
  <h2>ANOTHER MODAL!!!</h2>
  <button class="close-button" data-close aria-label="Close reveal" type="button">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

太棒了！

我的内部还有另一个模态框！

另一个模态框！！！

全屏

全屏模态框的宽度和高度均为窗口的 100%。添加 .full 类使其生效。

在视频中观看此部分

edit on codepen button 
<p><button class="button" data-toggle="exampleModal8">Click me for a full-screen modal</button></p>

<div class="full reveal" id="exampleModal8" data-reveal>
  <p>OH I'M SO FUUUUL</p>
  <img src="https://placekitten.com/1920/1280" alt="Introspective Cage">
  <button class="close-button" data-close aria-label="Close reveal" type="button">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

哦，我太满了

Introspective Cage

高级选项

无叠加层

要删除叠加层，请将属性 data-overlay="false" 添加到模态框。

edit on codepen button 
<p><button class="button" data-toggle="exampleModal9">Click me for an overlay-lacking modal</button></p>

<div class="reveal" id="exampleModal9" data-reveal data-overlay="false">
  <p>I feel so free!</p>
  <button class="close-button" data-close aria-label="Close reveal" type="button">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

我感到如此自由！

动画

要使用 Motion UI 库中的动画，请包含 data-animation-in="someAnimationIn" 和 data-animation-out="someAnimationOut" 属性。如果要调整速度或时间，请在属性中包含它，例如 data-animation-in="someAnimationIn fast"。

在视频中观看此部分

edit on codepen button 
<p><button class="button" data-toggle="animatedModal10">Click me for a modal</button></p>

<div class="reveal" id="animatedModal10" data-reveal data-close-on-click="true" data-animation-in="spin-in" data-animation-out="spin-out">
  <h1>Whoa, I'm dizzy!</h1>
  <p class="lead">There are many options for animating modals, check out the Motion UI library to see them all</p>
  <button class="close-button" data-close aria-label="Close reveal" type="button">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

哇，我头晕！

动画模态框有很多选项，请查看 Motion UI 库以查看所有选项

AJAX

要使用 AJAX 加载模态框内容，请使用以下代码段。

var $modal = $('#modal');

$.ajax('/url')
  .done(function(resp){
    $modal.html(resp).foundation('open');
});

辅助功能

默认情况下，模态框可以通过使用各种 ARIA 属性来访问。为了使模态框更易于访问，请通过将 aria-labelledby="exampleModalHeader11" 添加到容器并将 id="exampleModalHeader11" 添加到您要指定为标签的元素来为模态框指定标签。

edit on codepen button 
<p><button class="button" data-open="exampleModal11">Click me for a modal</button></p>

<div class="reveal" id="exampleModal11" aria-labelledby="exampleModalHeader11" data-reveal>
  <h1 id="exampleModalHeader11">Label for the Modal!</h1>
  <p class="lead">I am even more accessible than the other modals.</p>
  <button class="close-button" data-close aria-label="Close Accessible Modal" type="button">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

模态框的标签！

我比其他模态框更容易访问。

Sass 参考

变量

可以使用您项目的 设置文件 中的以下 Sass 变量自定义此组件的默认样式。

名称类型默认值说明
$reveal-background 颜色 $white

模态框的默认背景颜色。
$reveal-width 数字 600px

模态框的默认宽度，未应用任何类。
$reveal-max-width 数字 $global-width

模态框的默认最大宽度。
$reveal-padding 数字 $global-padding

模态框内的默认填充。
$reveal-border 数字 1px solid $medium-gray

模态框周围的默认边框。
$reveal-radius 数字 $global-radius

模态框的默认半径。
$reveal-zindex 数字 1005

模态框的 z-index。叠加层使用此值，而模态框本身使用此值加一。
$reveal-overlay-background 颜色 rgba($black, 0.45)

模态框叠加层的背景颜色。

混合宏

我们使用这些混合宏来构建此组件的最终 CSS 输出。您可以自己使用这些混合宏从我们的组件中构建自己的类结构。

reveal-overlay

@include reveal-overlay($background);

为模态框叠加层添加样式。

参数类型默认值说明
$background 颜色 $reveal-overlay-background

叠加层的背景颜色。

reveal-modal-base

@include reveal-modal-base;

为模态框添加基本样式。

reveal-modal-width

@include reveal-modal-width($width, $max-width);

调整模态框的宽度。

参数类型默认值说明
$width 数字 无

模态框的宽度。通常为百分比。
$max-width 数字 $reveal-max-width

模态框的最大宽度。

reveal-modal-fullscreen

@include reveal-modal-fullscreen;

创建一个全屏模态框，它将拉伸窗口的整个宽度和高度。

JavaScript 参考

初始化

要使用此插件，必须在 JavaScript 中包含以下文件

  • foundation.core.js
  • foundation.reveal.js
    • 以及实用工具库 foundation.util.keyboard.js
    • 以及实用工具库 foundation.util.touch.js
    • 以及实用工具库 foundation.util.triggers.js
    • 以及实用工具库 foundation.util.mediaQuery.js
    • 以及实用工具库 foundation.util.motion.js

Foundation.Reveal

创建 Reveal 的新实例。

var elem = new Foundation.Reveal(element, options);
名称类型说明
元素 jQuery 用于模态框的 jQuery 对象。
选项 对象 可选参数。

插件选项

使用这些选项自定义 Reveal 的实例。插件选项可以设置为单独的 data 属性、一个组合的 data-options 属性，或者作为传递给插件构造函数的对象。 详细了解如何初始化 JavaScript 插件。

名称 类型 默认值 说明
data-animation-in 字符串 &#x27;&#x27; 用于动画元素的 Motion-UI 类。如果未使用任何类，则默认为简单显示/隐藏。
data-animation-out 字符串 &#x27;&#x27; 用于动画元素的 Motion-UI 类。如果未使用任何类，则默认为简单显示/隐藏。
data-show-delay 数字 0 如果未使用动画，则在单击后延迟打开模态框的时间（以毫秒为单位）。
data-hide-delay 数字 0 如果未使用动画，则在单击后延迟关闭模态框的时间（以毫秒为单位）。
data-close-on-click 布尔值 true 允许单击正文/叠加层以关闭模态框。
data-close-on-esc 布尔值 true 允许在用户按下“ESCAPE”键时关闭模态框。
data-multiple-opened 布尔值 false 如果为 true，则允许多个模态框同时显示。
data-v-offset 数字或字符串 auto 模态框应从屏幕顶部向下推的距离（以像素为单位）。
data-h-offset 数字或字符串 auto 模态框应从屏幕侧面推入的距离（以像素为单位）。
data-full-screen 布尔值 false 允许模态框全屏显示，完全遮挡视图的其余部分。JS 也会检查这一点。
data-overlay 布尔值 true 允许模态框生成叠加层 div，该叠加层 div 将在模态框打开时覆盖视图。
data-reset-on-close 布尔值 false 允许模态框在关闭时移除并重新注入标记。如果使用视频元素而不使用提供程序的 API，则应为 true，否则，视频将在后台继续播放。
data-deep-link 布尔值 false 将位置哈希链接到模态框。在打开/关闭模态框时设置位置哈希，并在位置更改时打开/关闭模态框。
data-update-history false 如果启用了“deepLink”，则使用打开的模态框更新浏览器历史记录
data-append-to 字符串 body 允许模态框附加到自定义 div。
data-additional-overlay-classes 字符串 &#x27;&#x27; 允许向显示叠加层添加其他类名。

事件

这些事件将从任何附加了 Reveal 插件的元素触发。

名称说明
closeme.zf.reveal 在模态框打开之前立即触发。关闭当前打开的任何其他模态框
open.zf.reveal 模态框成功打开时触发。
closed.zf.reveal 模态框关闭完毕时触发。

方法

_disableScroll

$('#element').foundation('_disableScroll', scrollTop);

在显示 Reveal 时禁用滚动以防止背景移动

名称类型说明
scrollTop 数字 滚动以视觉应用，默认情况下为窗口当前滚动

_enableScroll

$('#element').foundation('_enableScroll', scrollTop);

在 Reveal 关闭时重新启用滚动

名称类型说明
scrollTop 数字 滚动到恢复，默认情况下为 html “top” 属性（由 `_disableScroll` 设置）

open

$('#element').foundation('open');

打开由 this.$anchor 控制的模态框，默认情况下关闭所有其他模态框。

触发以下事件： Reveal#event:closeme Reveal#event:open

close

$('#element').foundation('close');

关闭模态框。

触发以下事件： Reveal#event:closed

toggle

$('#element').foundation('toggle');

切换模态框的打开/关闭状态。

_destroy

$('#element').foundation('_destroy');

销毁模态框的实例。