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

<div class="reveal" id="subscribe-modal" data-reveal data-animation-in="fade-in" data-animation-out="fade-out">
    <div class="h2" style="margin: 0 30px 16px 0;">Ready to Win with WordPress?</div>
    <p class="lead">Let's take your site to the next level!</p>
    <p>I'll send you an email just once a week with valuable and actionable WordPress tips and tutorials.</p>
    <?php echo do_shortcode('

'); ?> <button class="close-button" data-close aria-label="Close modal" type="button"> <span aria-hidden="true">&times;</span> </button> </div> <button class="subscribe-modal hide" data-open="subscribe-modal"></button>

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

(function($) {
    $(document).ready(function() {
        
        var secondpage = getCookie("secondpage");
        if (secondpage == "1") {
            var modalseen = getCookie("modalseen");
            if (modalseen == "") {
                setTimeout(function() { 
                    jQuery('.subscribe-modal').click();
                }, 10000);
                setCookie("modalseen", 1, 8);
            }
        }else{
            setCookie("secondpage", 1, 1);
        }

    });
})(jQuery);

function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i <ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+ d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

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.

 

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments