1. PopUp (MODAL) Windows

  1. Making sure Foundation's javascript is loading on my page in the inspector "foundation.min.js"
  2. If your link to open the popup is going to be centered, go ahead and make the two divs that make that happen
  3. Create the anchor tag link (which is the green button you see below) give it an href equal to pound sign, assign this within the anchor tag: data-reveal-id="myModal" and if you want the link to be a button, you can add this as well: class="button small success">click me (text) then close the anchor
  4. Create a div to contain the popup window and add this t the opening div: id="myModal" class="reveal-modal" data-reveal. You make up that id, it doesn't have to be "myModal"--just as long as it matches the data-reveal-id= in the closing anchor link that you provided in step #3
  5. Build out the content of your popup page
  6. include a link to close the window, which is an anchor tag without an href, that looks like this: (left bracket) a class="close-reveal-modal" > with this string in the text area before the closing anchor tag: & # 215; "Ampersand, Hash 215 and we're good to go" (without the spaces--this makes a perfect "x" in the upper corner of the popout which closes the popout)
  7. You can embed video and do lots more. More Info: http://foundation.zurb.com/docs/components/reveal.php


Once you're done seeing how happy I am with this bottle of wine you can click the "x" to close me


Size your popup window

Add one of these class options

Note: Default on small is 100% (full) width.

2. Video Modal (Pop Up Window)

This does not work yet, come back to it when you learn more