Screen Shot 2013-12-09 at 6.32.17 PM I mentioned the sliding pop-up that my client wanted on her page here. I fixed it where it would pop-up – or slide in – every time someone visited the home page.

After the first couple of visits, I was irritated by the pop-up and didn’t want to see it again. I assume that other visitors get just as tired of the pop-up, if not more so.

My solution was to add a checkbox to allow the visitor to hide the pop-up so they didn’t see it again. When they click the checkbox, the pop-up disappears and doesn’t show up again. At least not for a very long time. Or until the visitor deletes her cookies.

I added a jQuery function to set a cookie for 365 days when the checkbox is clicked and then close the pop-up. I used the javascript setCookie function I found at W3.

 
//
jQuery('#dontshow').click(function() {
    setCookie('hide_newsletter', 1, 365);  //set the cookie for one year
    jQuery('#element_to_pop_up').bPopup().close();
});
				    

function setCookie(c_name,value,exdays) {
    var exdate=new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value=escape(value) + ((exdays==null) ? '' : '; expires='+exdate.toUTCString());
    document.cookie=c_name + '=' + c_value;
}
//

Each time someone comes to the page, it checks to see if the cookie has been set. If it hasn’t been set, then the pop-up appears. If the visitor has been there before and set the cookie by clicking the checkbox, the pop-up doesn’t show. No more irritating modal window to get in my way. Especially nice when you are editing and debugging the site.

//
    if (!isset($_COOKIE['hide_newsletter'])) {
        if (is_front_page()) {

            // php and javascript code for popup

        }
    }
//

I used php to check if the cookie has been set. You can find the code for the popup here. Since this is a WordPress site, I added all this code to the footer credits hook function in my functons.php file of my child theme.

Leave a Comment

Your email address will not be published.

Scroll to Top