CODEWITHSUNDEEP
javascriptcookieszurb-foundation
Nathan Skinner
Nathan Skinner

Reputation: 33

Adding Cookie to Modal with JS Cookie

I am building a newsletter modal with Foundation and JS Cookie. I've got the modal working correctly, just need to get the cookie right.

Here is my JS...

$(document).ready(function() {
  if(Cookies.get('showed_newsletter', 'false' ) ) {
      setTimeout(function(){
        $('#myModal2').foundation('open'); 
        Cookies.set('showed_newsletter', 'true', { expires: 7 });
      },3000) // 3 seconds.
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.3/js.cookie.min.js"></script>

<div class="reveal small" id="myModal2" data-reveal data-animation-in="fade-in" data-animation-out="fade-out" data-reset-on-close="true" >
  <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='http://www.youtube.com/embed/QILiHiTD3uc' frameborder='0' allowfullscreen></iframe></div>
  <button class="close-button" data-close aria-label="Close reveal" type="button">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

Any help would be appreciated.

Thanks!

Upvotes: 1

Views: 771

Answers (1)

Robiseb
Robiseb

Reputation: 1606

The doc says that the .get() method accepts only one [optional] parameter : The cookie name

So test if your cookie exists like this

if (!Cookies.get('showed_newsletter'))

If not, an undefinedwill be return

Cookies.get('nothing'); // => undefined

$(document).ready(function() {
  if (!Cookies.get('showed_newsletter')) {
      setTimeout(function(){
        $('#myModal2').foundation('open'); 
        Cookies.set('showed_newsletter', 'true', { expires: 7 });
      },3000) // 3 seconds.
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.3/js.cookie.min.js"></script>

<div class="reveal small" id="myModal2" data-reveal data-animation-in="fade-in" data-animation-out="fade-out" data-reset-on-close="true" >
  <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='http://www.youtube.com/embed/QILiHiTD3uc' frameborder='0' allowfullscreen></iframe></div>
  <button class="close-button" data-close aria-label="Close reveal" type="button">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

Upvotes: 1

Related Questions