- If your link to open the popup is going to be centered, go ahead and make the two divs that make that happen
- 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
- 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
- Build out the content of your popup page
- 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)
- You can embed video and do lots more. More Info: http://foundation.zurb.com/docs/components/reveal.php
Hello, I'm a POPUP WINDOW
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.
- tiny: Set the width to 30%.
- small: Set the width to 40%.
- medium: Set the width to 60%.
- large: Set the width to 70%.
- xlarge: Set the width to 95%.
- full: Set the width and height to 100%.
2. Video Modal (Pop Up Window)
This does not work yet, come back to it when you learn more
JDS Social Media:
This website is built using Zurb Foundation 5.0 Framework with SASS. ©2017 JDS Webs