- Foundation Tutorial
- Foundation - Home
- Foundation - Overview
- Foundation - Installation
- Foundation - Starter Projects
- Foundation - Kitchen Sink
- Foundation General
- Foundation - Global Styles
- Foundation - Sass
- Foundation - JavaScript
- Foundation - JavaScript Utilities
- Foundation - Media Queries
- Foundation - The Grid
- Foundation - Flex Grid
- Foundation - Forms
- Foundation - Visibility Classes
- Foundation - Base Typography
- Foundation - Typography Helpers
- Foundation - Basic Controls
- Foundation - Navigation
- Foundation - Containers
- Foundation - Media
- Foundation - Plugins
- Foundation SASS
- Foundation - Sass Functions
- Foundation - Sass Mixins
- Foundation Libraries
- Foundation - Motion UI
- Foundation Useful Resources
- Foundation - Quick Guide
- Foundation - Useful Resources
- Foundation - Discussion
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. |
To Continue Learning Please Login
Login with Google