How to Make Your Own Opt-in Popup with Foundation Reveal Modal

stock carl-heyerdahl-181868-unsplash


Are you working on a WordPress theme that uses Zurb Foundation framework?  Would you like to implement your own lead / opt-in popup using Foundation’s Reveal component?

The one I built even waits until you visit a 2nd page, and on that 2nd page, it waits 10 seconds before popping up.

Who needs a bloated WordPress plugin to have a popup on your site?  Not me.  I used to, but they would always add so much extra code and enqueue CDN files… forget that!

Let’s do it ourselves.  It’s easy.

Foundation Reveal Popup HTML Code

Here’s the HTML code that I put in footer.php

You can see the first div had a few data attributes.  Those tell Foundation to work its Reveal component magic on this element, and they are according to the Foundation Reveal docs.

The last line of code is a button.  The “hide” class makes it display: none  automatically when using Foundation.  I use this hidden button to toggle the Reveal modal to open.

My jQuery and Javascript to Control the Foundation Reveal Modal

The first part of this handles the 2nd page and 10 second wait logic that I described earlier.

The last part consists of 2 reusable javascript functions that handle getting and setting cookies in javascript.  I use those functions in the jQuery area in the first part.

What Do You Think?

Did this work for you and save you time?  Leave me a comment.

Need help getting it to work?  Leave me a comment.


Notify of
Inline Feedbacks
View all comments