Load Magnific Popup once every 15 days for new user

Question

I have a newsletter sign up form that I would like to load (popup) only one time every 15 days, otherwise it might get a bit annoying. I am currently using this jquery code to load the popup form when the page loads.

<div id="test-popup" class="white-popup mfp-hide">
Popup Form
</div>

<script>
jQuery(window).load(function(){
jQuery.magnificPopup.open({
items: {src: '#test-popup'},type: 'inline'}, 0);
});
</script>

This works fine when loading the form every time you access the page but I would like to limit this so new users see it once every 15 days. Not sure if the 15 days is best practice just something I came up with?

I'd set a cookie to expire every 15 days. if it's false/expired. show the popup. http://stackoverflow.com/questions/8103128/understanding-cookie-expiration-and-how-to-set — Radio, Feb 27 '15 at 19:05
I used to use this cookie script with colorbox but I am wondering how to do it for Magnific Popup? — mikenichols, Feb 27 '15 at 19:10

Caio Tarifa · Accepted Answer · 2015-02-27T20:04:20.163

You can use localStorage to do this.

$(window).on('load', function() {
  var now, lastDatePopupShowed;
  now = new Date();

  if (localStorage.getItem('lastDatePopupShowed') !== null) {
    lastDatePopupShowed = new Date(parseInt(localStorage.getItem('lastDatePopupShowed')));
  }

  if (((now - lastDatePopupShowed) >= (15 * 86400000)) || !lastDatePopupShowed) {
    $.magnificPopup.open({
      items: { src: '#test-popup' },
      type: 'inline'
    }, 0);

    localStorage.setItem('lastDatePopupShowed', now);
  }
});

<div id="test-popup" class="white-popup mfp-hide">
  Popup Form
</div>

You can see a working example here: http://codepen.io/caio/pen/Qwxarw

the 'localStorage' seems to be a pretty useful method. – vaneayoung Feb 27 '15 at 19:31 — vaneayoung, Feb 27 '15 at 19:31

score 1 · Answer 2 · answered Feb 27 '15 at 19:17

functions for create and read cookies:

function createCookie(name,value,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
   else var expires = "";
   document.cookie = name+"="+value+expires+"; path=/";
}

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

    }
    return null;
}

create a cookie for 15 days:

createCookie('run_popup',true,15);

check for elapsed 15 days

if(!readCookie('run_popup'))
... code for run popup...

score 0 · Answer 3 · edited May 23 '17 at 12:10

0

To make your popup open every 15 days for user you probably want to set a cookie that expires every 15 days. On your page, check if cookie has expired, if yes, show your form and reset your cookie.

In this thread you can find material for quick start with cookies.

That will work per browser per computer, ie if user opens your page in other browser, it will load your popup again.

edited May 23 '17 at 12:10

Community

1
1

answered Feb 27 '15 at 19:12

NenadP

585
7
24

Load Magnific Popup once every 15 days for new user

3 Answers3