Foundation Tabs Cannot Read Property 'hash' of Undefined
Reveal
JavaScript Movement UIModal dialogs, or popular-up windows, are handy for prototyping and production. Foundation includes Reveal, our jQuery modal plugin, to brand this easy for you lot.
Basics
A modal is just an empty container, so you tin can put any kind of content inside it, from text to forms to video to an entire grid.
Delight notation that we removed the option for AJAX loaded modals in Foundation half-dozen. Nosotros did make it very easy to implement on your ain though, check out a sample in the Advanced section.
To create a modal, add the class .reveal, the attribute data-reveal, and a unique ID to a container.
Watch this role in video
<div form="reveal" id="exampleModal1" data-reveal> <h1>Awesome. I Have Information technology.</h1> <p form="pb">Your burrow. It is mine.</p> <p>I'yard a cool paragraph that lives inside of an even cooler modal. Wins!</p> <button class="shut-button" data-shut aria-label="Close modal" type="push"> <span aria-subconscious="truthful"> × </span> </push button> </div> Awesome. I Have It.
Your couch. It is mine.
I'm a cool paragraph that lives within of an even libation modal. Wins!
You lot'll besides demand a mode to open up the modal. Add the attribute information-open up to any chemical element. The value of data-open should exist the ID of the modal.
<p> <button class="button" data-open="exampleModal1">Click me for a modal</button> </p> You lot'll also demand a way to close the modal from inside. Past default, modals will close if clicked exterior of, or if the esc central is pressed. Even so, you'll by and large besides want to add your own click trigger. Add together the aspect data-shut to any element inside the modal to add one.
You can use our handy close push styles to practice this:
<button class="close-button" information-shut aria-label="Shut modal" blazon="button"> <span aria-hidden="true"> × </span> </push button> Sizing
On small screens, a modal is e'er 100% of the width of the screen. On medium-sized screens and larger, the width changes to 600px (see the $reveal-width setting).
The size of a modal can be inverse with these sizing classes, which are added to the modal container:
-
.tiny: thirty% wide -
.minor: 50% wide -
.large: 90% wide -
.total: 100% width and elevation, defaults theescClosechoice to truthful, as well as creates a close button.
Scout this part in video
<div class="tiny reveal" id="exampleModal" data-reveal> <!-- ... --> </div> I may be minor, but I've got a big heart!
Nested Modal
It's possible for modals to open other modals. Create a 2d modal with a unique ID, and then add a click trigger with information-open up inside the showtime modal.
<p> <push class="push" data-open="exampleModal2">Click me for a modal</button> </p> <!-- This is the beginning modal --> <div form="reveal" id="exampleModal2" information-reveal> <h1>Awesome!</h1> <p class="lead">I have some other modal inside of me!</p> <button class="button" data-open="exampleModal3">Click me for another modal!</button> <push button class="close-push" data-close aria-label="Shut reveal" blazon="button"> <span aria-subconscious="truthful"> × </bridge> </button> </div> <!-- This is the nested modal --> <div class="reveal" id="exampleModal3" data-reveal> <h2>ANOTHER MODAL!!!</h2> <button class="close-button" information-close aria-label="Shut reveal" blazon="button"> <bridge aria-hidden="true"> × </bridge> </push button> </div> Awesome!
I have another modal inside of me!
Some other MODAL!!!
Full-screen
A full-screen modal is 100% of the width and height of the window. Add the .full class to brand information technology become.
Watch this role in video
<p> <button course="button" data-toggle="exampleModal8">Click me for a full-screen modal</button> </p> <div course="total reveal" id="exampleModal8" data-reveal> <p>OH I'M SO FUUUUL</p> <img src="https://placekitten.com/1920/1280" alt="Introspective Cage"> <button grade="close-push" information-shut aria-characterization="Close reveal" blazon="button"> <bridge aria-hidden="true"> × </span> </button> </div> OH I'M SO FUUUUL
Avant-garde Options
No Overlay
To remove the overlay, add the aspect information-overlay="false" to the modal.
<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="imitation"> <p>I feel so free!</p> <push button class="close-button" data-close aria-label="Close reveal" type="button"> <span aria-hidden="true"> × </span> </button> </div> Animations
To use animations from the Motility UI library, include the information-animation-in="someAnimationIn" and data-animation-out="someAnimationOut" attributes. If you lot desire to adjust the speed or timing, include information technology the attributes like data-animation-in="someAnimationIn fast".
Lookout this part in video
<p> <push form="button" data-toggle="animatedModal10">Click me for a modal</button> </p> <div form="reveal" id="animatedModal10" data-reveal information-close-on-click="truthful" data-animation-in="spin-in" information-animation-out="spin-out"> <h1>Whoa, I'grand featherbrained!</h1> <p class="lead">There are many options for animative modals, cheque out the Motility UI library to see them all</p> <push button class="close-button" information-close aria-characterization="Close reveal" type="button"> <span aria-hidden="true"> × </span> </push> </div> Whoa, I'm dizzy!
There are many options for animative modals, bank check out the Motion UI library to run into them all
AJAX
To utilise AJAX to load your modal content, use the code snippet below.
var $modal = $('#modal'); $.ajax('/url') .washed( function(resp){ $modal.html(resp).foundation('open'); }); Accessibility
Modals by default are accessible through the use of various ARIA attributes. To make a modal even more attainable, designate a label to the modal by adding aria-labelledby="exampleModalHeader11" to the container and id="exampleModalHeader11" to the chemical element you want to designate equally the characterization.
<p> <button class="button" data-open="exampleModal11">Click me for a modal</push button> </p> <div class="reveal" id="exampleModal11" aria-labelledby="exampleModalHeader11" information-reveal> <h1 id="exampleModalHeader11">Label for the Modal!</h1> <p class="lead">I am fifty-fifty more attainable than the other modals.</p> <button class="close-button" data-close aria-label="Close Attainable Modal" type="push"> <span aria-hidden="truthful"> × </span> </button> </div> I am even more attainable than the other modals.
Sass Reference
Variables
The default styles of this component can be customized using these Sass variables in your projection's settings file.
| Name | Type | Default Value | Clarification |
|---|---|---|---|
$reveal-groundwork | Color | $white | Default background colour of a modal. |
$reveal-width | Number | 600px | Default width of a modal, with no grade applied. |
$reveal-max-width | Number | $global-width | Default maximum width of a modal. |
$reveal-padding | Number | $global-padding | Default padding inside a modal. |
$reveal-edge | Number | 1px solid $medium-gray | Default border around a modal. |
$reveal-radius | Number | $global-radius | Default radius for modal. |
$reveal-zindex | Number | 1005 | z-alphabetize for modals. The overlay uses this value, while the modal itself uses this value plus 1. |
$reveal-overlay-background | Color | rgba($black, 0.45) | Groundwork color of modal overlays. |
Mixins
Nosotros use these mixins to build the final CSS output of this component. You lot can use the mixins yourself to build your ain grade structure out of our components.
reveal-overlay
@include reveal-overlay($background); Adds styles for a modal overlay.
| Parameter | Type | Default Value | Description |
|---|---|---|---|
$background | Color | $reveal-overlay-background | Background color of the overlay. |
reveal-modal-base
@include reveal-modal-base; Adds base styles for a modal.
reveal-modal-width
@include reveal-modal-width($width, $max-width); Adjusts the width of a modal.
| Parameter | Type | Default Value | Description |
|---|---|---|---|
$width | Number | None | Width of the modal. More often than not a percent. |
$max-width | Number | $reveal-max-width | Maximum width of the modal. |
reveal-modal-fullscreen
@include reveal-modal-fullscreen; Creates a total-screen modal, which stretches the full width and height of the window.
JavaScript Reference
Initializing
The following files must be included in your JavaScript to use this plugin:
-
foundation.core.js -
foundation.reveal.js- With utility library
foundation.util.keyboard.js - With utility library
foundation.util.touch on.js - With utility library
foundation.util.triggers.js - With utility library
foundation.util.mediaQuery.js - With utility library
foundation.util.motion.js
- With utility library
Foundation.Reveal
Creates a new instance of Reveal.
var elem = new Foundation.Reveal(element, options); | Proper name | Type | Description |
|---|---|---|
element | jQuery | jQuery object to utilize for the modal. |
options | Object | optional parameters. |
Plugin Options
Use these options to customize an example of Reveal. Plugin options tin can be set as individual data attributes, one combined data-options aspect, or as an object passed to the plugin's constructor. Learn more about how JavaScript plugins are initialized.
| Name | Type | Default | Description |
|---|---|---|---|
information-animation-in | string | '' | Motion-UI class to apply for animated elements. If none used, defaults to simple show/hide. |
data-animation-out | cord | '' | Motion-UI grade to use for animated elements. If none used, defaults to elementary testify/hibernate. |
information-show-delay | number | 0 | Time, in ms, to delay the opening of a modal after a click if no animation used. |
data-hide-delay | number | 0 | Time, in ms, to delay the endmost of a modal after a click if no blitheness used. |
data-close-on-click | boolean | true | Allows a click on the body/overlay to shut the modal. |
information-close-on-esc | boolean | true | Allows the modal to shut if the user presses the `ESCAPE` key. |
data-multiple-opened | boolean | faux | If true, allows multiple modals to be displayed at once. |
information-v-commencement | number or cord | auto | Distance, in pixels, the modal should push down from the top of the screen. |
data-h-starting time | number or string | auto | Distance, in pixels, the modal should push in from the side of the screen. |
data-full-screen | boolean | false | Allows the modal to be fullscreen, completely blocking out the rest of the view. JS checks for this too. |
information-overlay | boolean | truthful | Allows the modal to generate an overlay div, which will cover the view when modal opens. |
data-reset-on-close | boolean | false | Allows the modal to remove and reinject markup on close. Should be true if using video elements w/o using provider's api, otherwise, videos will continue to play in the groundwork. |
information-deep-link | boolean | false | Link the location hash to the modal. Set the location hash when the modal is opened/closed, and open/close the modal when the location changes. |
data-update-history | | fake | If `deepLink` is enabled, update the browser history with the open up modal |
information-append-to | string | trunk | Allows the modal to suspend to custom div. |
data-additional-overlay-classes | string | '' | Allows adding additional class names to the reveal overlay. |
Events
These events will fire from whatever element with a Reveal plugin fastened.
| Proper noun | Description |
|---|---|
closeme.zf.reveal | Fires immediately before the modal opens. Closes whatsoever other modals that are currently open |
open.zf.reveal | Fires when the modal has successfully opened. |
closed.zf.reveal | Fires when the modal is done closing. |
Methods
_disableScroll
$('#element').foundation('_disableScroll', scrollTop); Disables the roll when Reveal is shown to prevent the groundwork from shifting
| Name | Type | Description |
|---|---|---|
scrollTop | number | Scroll to visually employ, window current scroll by default |
_enableScroll
$('#element').foundation('_enableScroll', scrollTop); Reenables the scroll when Reveal closes
| Name | Type | Description |
|---|---|---|
scrollTop | number | Ringlet to restore, html "top" belongings by default (as set by `_disableScroll`) |
open up
$('#chemical element').foundation('open up'); Opens the modal controlled past this.$anchor, and closes all others by default.
Fires these events: Reveal#result:closeme Reveal#result:open
close
$('#element').foundation('close'); Closes the modal.
Fires these events: Reveal#result:closed
toggle
$('#element').foundation('toggle'); Toggles the open/closed country of a modal.
_destroy
$('#element').foundation('_destroy'); Destroys an instance of a modal.
Source: https://get.foundation/sites/docs/reveal.html
0 Response to "Foundation Tabs Cannot Read Property 'hash' of Undefined"
Post a Comment