Foundation - Reveal JavaScript 参考

Foundation 提供如下所示的 Reveal 模态框 JavaScript 组件：

初始化

您可以使用 `foundation.reveal.js` 和 `foundation.core.js` 插件在 JavaScript 中初始化面板。`foundation.core.js` 插件需要以下库：

它指定如下定义的 Reveal 实例：

var my_element = new Foundation.Reveal(element);

Reveal 包含如下表中列出的值：

序号	名称及描述	类型
1	element 它使用 jQuery 对象表示模态框。	数字
2	options 它指定模态框的可选参数。	对象

序号

名称及描述

类型

element

它使用 jQuery 对象表示模态框。

数字

options

它指定模态框的可选参数。

对象

您可以使用以下插件选项来自定义 Reveal 实例。

序号	名称及描述	示例
1	animationIn 用于动画元素。	`slide-in-left`
2	animationOut 用于动画元素。	`slide-out-right`
3	showDelay 显示打开模态框所需时间（毫秒）。	10
4	hideDelay 显示关闭模态框所需时间（毫秒）。	10
5	closeOnClick 单击主体或遮罩层时关闭模态框。	true
6	closeOnEsc 单击“ESC”键时关闭模态框。	true
7	multipleOpened 一次显示多个模态框。	false
8	vOffset 指定模态框应从屏幕顶部向下推动的像素距离。	100
9	hOffset 指定模态框应从屏幕顶部向下推动的像素距离。	0
10	fullScreen 您可以根据窗口的宽度和高度创建全屏模态框。	false
11	btmOffsetPct 指定模态框应从视图底部向上推动的屏幕高度百分比。	10
12	overlay 模态框打开时，将生成一个覆盖层 div。	true
13	resetOnClose 指定关闭模态框时应重置模态框。	false

Reveal 提供如下表中列出的事件：

序号	事件及描述
1	closeAll.zf.reveal 在打开新的模态框之前关闭所有当前的模态框。
2	open.zf.reveal 成功打开模态框时触发此事件。
3	closed.zf.reveal 关闭模态框时触发此事件。

序号

事件及描述

closeAll.zf.reveal

在打开新的模态框之前关闭所有当前的模态框。

open.zf.reveal

成功打开模态框时触发此事件。

closed.zf.reveal

关闭模态框时触发此事件。

Reveal 提供以下函数：

序号	函数及描述
1	.open 打开由 `this.$anchor` 控制的模态框，并关闭其他模态框。
2	.close 关闭模态框。
3	.toggle 切换模态框的状态。
4	.destroy 销毁模态框实例。

foundation_containers.htm

打印页面