javascript - Load Magnific Popup once every 15 days for new user - Stack Overflow

admin管理员组

文章数量:1334887

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>

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?

• javascript
• jquery
• magnific-popup
• jquery-cookie

Share Improve this question Follow asked Feb 27, 2015 at 19:01 mikenicholsmikenichols 98922 gold badges1111 silver badges1919 bronze badges 4

• 1 I'd set a cookie to expire every 15 days. if it's false/expired. show the popup. stackoverflow./questions/8103128/… – Radio Commented Feb 27, 2015 at 19:05
• You should save it in a database – Ɛɔıs3 Commented Feb 27, 2015 at 19:06
• I used to use this cookie script with colorbox but I am wondering how to do it for Magnific Popup? – mikenichols Commented Feb 27, 2015 at 19:10
• <script type="text/javascript"> jQuery(document).ready(function(){ if (document.cookie.indexOf('visited=true') == -1) { var fifteenDays = 1000*60*60*24*15; var expires = new Date((new Date()).valueOf() + fifteenDays); document.cookie = "visited=true;expires=" + expires.toUTCString(); $.colorbox({width:"480px", inline:true, href:"#subscribe"}); } }); </script> – mikenichols Commented Feb 27, 2015 at 19:12

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

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

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...

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 puter, ie if user opens your page in other browser, it will load your popup again.

本文标签： javascriptLoad Magnific Popup once every 15 days for new userStack Overflow