Here's a small tutorial on how to implement the
Reveal Modal on a Foundation based theme like
Phaedra or
Estiasis. 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 field.
4. Add the Foundation trigger to the
Custom Javascript field.
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.html1. 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:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
<script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.2.2/js/foundation.min.js"></script>
4. Lastly trigger Foundation from the JavaScript field:
$(document).foundation();
That's all to it. You try the demo here:
http://www.archetypon.net/preview/phaedra/plugins/Foundation-Reveal-Modal/
Auto Display
We may also get the modal to display without clicking a button, handy to show any alerts or promotions. In order to accomplish this follow all the steps above and add this piece of code to the Custom JavaScript field, just after the Foundation trigger:
$('#myModal').delay(5000).foundation('reveal', 'open');