Foundation Reveal Modal tricks

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.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:

<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');



blog comments powered by Disqus

We use cookies to ensure that we give you the best experience on our website. Click here for more information.

© Archetypon 2020
Choose a theme


Revisiting the Blog

Our stories and lessons, since 2012.









Follow us


Archetypon

Newsletter

We cover RapidWeaver, Themes, Blocs, guides, promotions and other fun stuff. Plus you get a sweet 15% off discount on new product releases.