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

列印頁面