Here's a small tutorial on how to implement the Reveal Modal
on a Foundation based theme like Phaedra
. We know how to do it with a stack in a Stacks page, but what about implementing a modal into a Blog or Photo Album page?
Here's the example that we'll try to reproduce:http://www.archetypon.net/preview/phaedra/plugins/Foundation-Reveal-Modal/
All we have to do is:
1. Add the modal markup to the sidebar.
2. Use the data-reveal
trigger on a button.
3. Add the Foundation script call to the Custom Header
If you're not familiar to the Foundation Reveal Modal or any of Foundation docs, this is a good place to read more about it and where I went to grab the markup: http://foundation.zurb.com/docs/components/reveal.html
1. So let's start by using the markup for the Modal - copy & paste to the sidebar:
<div id="myModal" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<h2 id="modalTitle">Awesome. I have it.<p class="lead">Your couch. It is mine.<p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!<a class="close-reveal-modal" aria-label="Close">×</div>
After you pasted the snippet, select it an Ignore Format
(CMD + .)
2. Now add the Modal call to a button. This is an example for the Phaedra theme button, but can be applied to any button:
<a href="#" data-reveal-id="myModal" class="button-2 envelope"></a>
3. Call jQuery and Foundation from the Custom Header:
That's all to it. You try the demo here: http://www.archetypon.net/preview/phaedra/plugins/Foundation-Reveal-Modal/