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

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

• javascript
• jquery

3 Answers 3

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

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

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./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
       });
    }
});