Store reveal modal cookie in user browser

Question

I am currently using the Zurb foundation framework, I would like to create modal which will appear on page load. I would like this modal to store a cookie in the user browser so that if they have visit the site before they will not be shown the same modal again.

Here is how I attempted to implement this using jQuery which is used initiate foundation. Note I am using the jQuery no conflict wrapper because I am implementing this with word press.

jQuery(document).ready(function($){


$('#myModal2').foundation('reveal', 'open');

 var shown = $.cookie('dialogShown');
      if (!shown) {
            setTimeout(function() {
                  $('#myModal2').foundation({modal: true});
                  $.cookie('dialogShown', 'true');
            }, 2000);





      }});

This code is not giving me the desired output, the modal opens on page load over and over again, without storing the cookie, I would really appreciate if anyone could help me out with this. Thanks

score 1 · Answer 1 · answered Jun 28 '15 at 23:08

1

The code you pasted is doing exactly what you have written.

After document ready, opens reveal module (see more: http://foundation.zurb.com/docs/v/4.3.2/components/reveal.html )

And after that there is you cookie magic. You have to check for the cookie before you open the modal if you want the behavior described above. :)

answered Jun 28 '15 at 23:08

Pavelloz

551
5
12

Thank you @pavelloz I am fairly new to javascript, from what i understand I would have to put another if statement in there to check if the modal box has been shown. `if (shown === null) { // Do Nothing } if (jQuery.cookie('reveal')) { // Reactions }` Am i on the right track? – steamfunk Jun 29 '15 at 13:32
jquery-cookie/[js-cookie](https://github.com/js-cookie/js-cookie) returns `undefined` when the cookie is not found. So you need to check against `undefined` instead of `null`. Unless foundation is using a veeery outdated version. – Fagner Brack Jun 30 '15 at 00:20
@steamfunk , write yourself a list of things that program should do (write, not think), example: 1) Check if `shown` cookie is present (IMO no need for specific values, undefined vs anything else should do) 2) If not, show modal 2a) Set cookie 3) If yes, return If you have a list like that it is much easier to expand it into code. After some time you will be writing those sentences in pseudo-code, and then in live code. Thats how we learn languages :) – Pavelloz Jun 30 '15 at 14:24

score 0 · Accepted Answer · answered Jul 02 '15 at 16:02

In case anyone else is wondering I have posted a solution using the jQuery cookies plugin.

jQuery(document).ready(function($) {
 if ($.cookie('modal_shown') == null) {
        $.cookie('modal_shown', 'yes', { expires: 7, path: '/' });
        $("#myModal2").foundation('reveal', 'open');
    }
});

Store reveal modal cookie in user browser

2 Answers2