Reveal Modal - Show only once per day

Question

I am using reveal modal to load a popup when my website loads. However the popup loads everytime the page loads. Since a visitor can visit multiple pages or on multiple instances, this limitation is turning out to be bad for our visitors experience.

The following is the js I am using to load the reveal modal once a page is loaded.

jQuery(document).ready(function($) {
/* Pop-up
================================================= */

$(function() {
    function showpanel() {
    $('.reveal-modal').reveal({
        animation: 'fade',
        animationspeed: 800
    });
    }
    setTimeout(showpanel, 4000)
   }); 
});

What can I add to ensure that the the reveal modal loads only once in a particular day no matter how many different pages a visitor accesses?

Would appreciate any assistance.

Thanks

score 2 · Answer 1 · edited May 23 '17 at 12:17

2

The easiest way to achieve this is with a cookie which only lasts 24 hours.

What you'd do is check if there was a cookie and show the dialog if there isn't

if($.cookie('MyCookie') != 'DialogShown'){
  showpanel();
  setCookie();
}

Here's the code to set it

function setCookie(){
    $.cookie('MyCookie', 'DialogShown',
      {
         expires: date.getTime() + (24 * 60 * 60 * 1000) // now add 24 hours
      });
}

However be aware the user may have configured their browser to reject cookies and in the UK (and probably other countries there are regulations about websites using cookies).

edited May 23 '17 at 12:17

Community

1
1

answered Jan 21 '14 at 08:45

Liath

9,913
9
51
81

Hi Liath, Thanks for your response. However, can you please assist with showing me how to implement your code into my code above. I am relatively new to this. – user3218309 Jan 22 '14 at 02:12
I've expanded my answer – Liath Jan 22 '14 at 07:35

score 2 · Answer 2 · answered Jan 21 '14 at 08:45

2

You'll need persistent storage, as in cookies, localStorage or serverside storage.

$(function() {
    if ( localStorage.getItem('seen') != (new Date()).getDate()) {
        setTimeout(showpanel, 4000);
    }
});


function showpanel() {
    $('.reveal-modal').reveal({
        animation: 'fade',
        animationspeed: 800
    });

    localStorage.setItem('seen', (new Date()).getDate());
}

There's a polyfill for older browsers at MDN

answered Jan 21 '14 at 08:45

adeneo

312,895
29
395
388

2

Nice approach and certainly gets around the issues with cookies! May have issues with older browsers... – Liath Jan 21 '14 at 08:48
@adeno, I've tried to implement the script but it wouldn't work for some reason. The popup keeps on re appearing each time a page of the website is loaded. My implementation was as follows: jQuery(document).ready(function($) { /* Pop-up ================================================= */ $(function() { if ( localStorage.getItem('seen') != (new Date()).getDate()) { setTimeout(showpanel, 4000); } }); function showpanel() { $('.reveal-modal').reveal({ animation: 'fade', animationspeed: 800 }); localStorage.setItem('seen', (new Date()).getDate()); } – user3218309 Jan 22 '14 at 02:10
Works just fine for me, here's a [**fiddle**](http://jsfiddle.net/ysURj/), the alert only pops up once. – adeneo Jan 22 '14 at 13:10

tgpatel · Answer 3 · 2014-01-22T05:16:24.220

1

For Client side solution you may use cookie to set in user's browser and set it's expiry for 1 day.

$.cookie('the_cookie', 'the_value', { expires: 1 });

For more details see: https://github.com/carhartl/jquery-cookie

EDIT:

Include Jquery-cookie Plugin in your html page and then add following piece of code

$(function() {
    if($.cookie('alreadyShow') === null) {
        $.cookie('alreadyShow', true, {expires: 1});

        $('.reveal-modal').reveal({
           animation: 'fade',
           animationspeed: 800
       });
    }
});

edited Jan 22 '14 at 05:16

answered Jan 21 '14 at 08:45

tgpatel

134
5

Thanks. Because I am relatively a rookie in web programming, would really appreciate if you can help me implementing your suggestion into my code above. – user3218309 Jan 22 '14 at 02:11

Reveal Modal - Show only once per day

3 Answers3