Foundation Reveal – Add Pop Up Windows To Your Content

foundation-reveal

Reveal Modal dialogs, or pop-up windows, are handy for prototyping and production. Foundation includes Reveal, our jQuery modal plugin, to make this easy for you.Foundation

Post updated July 8th, 2016

Reveal Modal

We have all been there before. You work on a project and the end is in site and all of sudden your client comes up with the notion they want some kind of pop-up window to appear. The great thing about Foundation is it comes with a modal script of its own called Reveal. You will be amazed at how easy it is to add to your content using WP-Forge and/or WP-Starter.

Reveal Modal Examples

The following is how a regular Reveal Modal will look like when you add it to your content:

Click me for a modal

Awesome. I Have It.

Your couch. It is mine.

I’m a cool paragraph that lives inside of an even cooler modal. Wins!

Adding the above example to the content of this post was super easy. All I did was click the “text” tab in the post editor and then added the following code:

<a class="large button radius" data-open="exampleModal">Click me for a modal</a>

<div id="exampleModal" class="reveal" data-reveal="">
<h1>Awesome. I Have It.</h1>
<p class="lead">Your couch. It is mine.</p>
<p>I’m a cool paragraph that lives inside of an even cooler modal. Wins!</p>
<p><button class="close-button" type="button" data-close="">×</button>
</div>

As you can see I used a regular button for the link to “fire” off the modal. All you need to do is modify the code above to suit your needs. Any modal you create has to have a unique name. The two areas you need to modify to give your modal a unique name is the portion that looks like this: data-open="exampleModal" and id="exampleModal". Change the portion that says “exampleModal” to whatever you like but remember the two must match in order for the reveal modal to function properly.

Reveal Modal Sizes

Another great feature of the Reveal Modal is you can change the size of the modal window. Foundation has included different size classes:

  • .tiny – Modal size will be set to 30%
  • small – Modal size will be set to 40%
  • medium – Modal size will be set to 60%
  • large – Modal size will be set to 70%
  • xlarge – Modal size will be set to 95%
  • full – Modal size will be set to 100%

Here is an example of a “large” reveal modal window:

Click me for a large modal

Awesome. I Have It.

Your couch. It is mine.

I’m a cool paragraph that lives inside of an even cooler modal. Wins!

I just added the appropriate size class to the reveal class(highlighted):

<a class="large button radius" data-open="largeModal">Click me for a large modal</a>
<div id="largeModal" class="large reveal" data-reveal="">
<h1>Awesome. I Have It.</h1>
<p class="lead">Your couch. It is mine.</p>
<p>I’m a cool paragraph that lives inside of an even cooler modal. Wins!</p>
<p><button class="close-button" type="button" data-close="">×</button>
</div>

Reveal Modal Within A Modal

Another great feature of Foundation’s Reveal Modal, which is probably one that I like the most, is having a modal window appear inside of another modal window. Check out the example below.

Click me for a modal

Awesome!

I have another modal inside of me!

Click me for another modal

HA! I’M Another Modal!

Here is the code I used for the example:

<a class="large button radius" data-open="insideModal">Click me for a modal</a>

<div id="insideModal" class="reveal" data-reveal="">
<h1>Awesome!</h1>
<p class="lead">I have another modal inside of me!</p>
<a class="button radius" data-open="nestedModal">Click me for another modal</a>
<button class="close-button" type="button" data-close="">×</button>
</div>

<div id="nestedModal" class="reveal" data-reveal="">
<h2>HA! I'M Another Modal!</h2>
<button class="close-button" type="button" data-close="">×</button>
</div>

More Reveal Modal Examples

One other example of what you can do with Foundation’s Reveal Modal is show a video:

Click to watch a video

One of my favorite bands

This is one of my favorite bands called Pop Evil (whom I listen to sometimes while I work on WP-Forge):

Here’s the code for the video:

<a class="button radius" data-open="videoModal">Click to watch a video</a>
<div id="videoModal" class="large reveal" data-reveal="" data-reset-on-close="true">
<h2>One of my favorite bands</h2>
<p>This is one of my favorite bands called Pop Evil (whom I listen to sometimes while I work on WP-Forge):</p>
<iframe src="//www.youtube.com/embed/DWdtN7pCZug" allowfullscreen="" frameborder="0"></iframe>
<button class="close-button" type="button" data-close="">×</button>
</div>

In the code above you will notice that I added data-reset-on-close=”true”(highlighted). You will need to add this anytime you are using a video in a reveal modal. If you don’t, the audio from the video will keep playing after the modal window is closed.

And there you have it, Reveal Modals are kinda ‘niffty don’t you think?

I hope the examples above make it easier for anyone using WP-Forge or WP-Forge with a WordPress child theme to add reveal modals to their content easier.

Find out more: Foundation Docs: Reveal

24 thoughts on “Foundation Reveal – Add Pop Up Windows To Your Content

  1. Great theme my friend, i´m bulding one for my self usign foundation 4 too. Is more like a exercise to learn to build themes, but i like a lot what you did. Regards

    • Glad you like the theme. She started out the same way, nothing more than an exercise. I wish you the best of luck and if you need any help or have any questions, please feel free to shoot me an email.

  2. Thanks for your answer Thomas, Well i have a question my friend, is a lazy question :), Has the theme support for the Top Bar of Foundation ?, i already installed the theme in one of my sites and i´ll give a try later to see if is posible. Regards

    • Not a problem. Yes WP-Forge does use the Top Bar, that’s what the menu is. All you need to do is create your menu by going to Appearance>Menus. Add some links to your new menu. Then assign your menu to the Primary Navigation. The Secondary Navigation area is the footer. Hope this helps 😉

    • Hi Febrian,

      If you read the post thoroughly, it will explain how to use the Reveal code within the WordPress theme WP-Forge. If you are asking how to put it into a WordPress theme, that would be a very long post or reply.

  3. Hi Thomas,

    “…So I added a piece a java script that takes any and all divs with the class of .reveal-modal and moves the content of those divs to just above the closing body tag.”

    Where is the JS?

    Thanks,

    Angela

  4. Hi Thomas,

    Very nice tutorial, complete and easy to follow.
    I’m using a Reveal Popup Subscription Form similar to your WP-Forge version except it’s on a html site. Is there an easy way that you know of to return subscribers to a popup thank you message in a similar fashion on a plain html site?

    • Hey Trendy,

      Glad you like it. To answer your question, no I do not. I have never used Foundation on a strictly HTML site. I have always used WP.

      The way it happens here is the subscription form is placed inside the reveal modal, so when someone subscribes, it redirects back to the same modal.

      Maybe you could use the modal within a modal example and have your subscription button perform 2 functions simultaneously: the first being to submit the form and the second being firing the inner modal with your thank you message? You would have to work out the particulars but I think maybe that may be an option for you.

      If you get it working I’d like to see it 😉

  5. Can someone provide an example of how to change the default animation. I would like to add data-animation=”fadeAndPop” and when i do the animation stays exactly the same.

    I would really love the help

    • Hi Ilan,

      Just a quick note, adding data-animation=”fadeAndPop” is not the proper way to change the default animation. It should be data-options="animation:'fadeAndPop'".

      Unfortunately this is a bug in Foundation v5.0.2 core and seems to be corrected in v5.0.3. Please see this thread on the Foundation Forums: Foundation 5 Reveal Options NOT WORKING

      This seems to have been corrected in Foundation core v5.0.3, which hasn’t been released yet. Once it has been released, WP-Forge will be updated accordingly.

    • Hi Ilan,

      At this time I cannot even determine if there are any other animation options. I looked over the Docs pertaining to Reveal and could not find anything. I did however ask if there were any other options available in this forum thread: Reveal: Additional Animation Options?

      If there are other options, then I believe they will be made avaiable to the masses when v5.0.3 is released.

      • Hi Ilan,

        Just a quick update, the fade animation does work with the v5.0.3 update. As I mentioned previously you need to add it by adding this to any reveal modal you use:

        data-options="animation:'fade'"

        Hope this helps.

Leave a Comment