Foundation - Reveal JavaScript Reference

Foundation provides JavaScript components for the reveal modal as listed below −

Initializing

You can initialize the pane in the JavaScript by using the foundation.reveal.js and foundation.core.js plugins. The foundation.core.js plugin requires following libraries −

  • foundation.util.keyboard.js

  • foundation.util.box.js

  • foundation.util.triggers.js

  • foundation.util.mediaQuery.js

  • foundation.util.motion.js

Foundation.Reveal

It specifies instance of the reveal as defined below −

var my_element = new Foundation.Reveal(element);

The reveal includes below values as listed in the table −

Sr.No. Name & Description Type
1

element

It uses the jQuery object for the modal.

 Number
2

options

It specifies the optional parameters for the modal.

 Object

Plugin Options

You can use the following plugin options to customize the reveal instance.

Sr.No. Name & Description Example
1

animationIn

It is used for animated elements.

 'slide-in-left'
2

animationOut

It is used for animated elements.

 'slide-out-right'
3

showDelay

It displays the time taken to open the modal in ms.

 10
4

hideDelay

It displays the time taken to close the modal in ms.

 10
5

closeOnClick

It closes the modal when you click on the body or overlay.

 true
6

closeOnEsc

It closes the modal when you click the 'ESCAPE' key.

 true
7

multipleOpened

It displays the multiple modals at once.

 false
8

vOffset

It specifies the distance in pixels when modal should push down from the top of the screen.

 100
9

hOffset

It specifies the distance in pixels when modal should push down from the top of the screen.

 0
10

fullScreen

You can create full screen modal according to width and height of the window.

 false
11

btmOffsetPct

When the modal should push up from the bottom of the view, it specifies the percentage of screen height.

 10
12

overlay

When modal opens, it will generate an overlay div.

 true
13

resetOnClose

It specifies that modal should be reset when you close it.

 false

Events

Reveal provides the following events as listed in the table −

Sr.No. Event & Description
1

closeAll.zf.reveal

It closes all the current modals before opening the new modal.
2

open.zf.reveal

It triggers the event when you open the modal successfully.
3

closed.zf.reveal

It triggers the event when it closes the modal.

Functions

Reveal provides the following functions −

Sr.No. Function & Description
1

.open

It will open the modal, which is controlled by this.$anchor and closes the other modals.
2

.close

It will close the modal.
3

.toggle

It toggles the state of a modal.
4

.destroy

It destroys the modal instance.
foundation_containers.htm
Advertisements