javascript - 使用 JS Cookie 添加 Cookie 到 Modal

Question

我正在使用 Foundation 和 JS Cookie 构建新闻通讯模式。我已经让模态正常工作，只需要正确获取 cookie 即可。

这是我的 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>

如有任何帮助，我们将不胜感激。

谢谢!

Answer 1

The doc表示 .get() 方法仅接受一个[可选]参数:cookie 名称

所以测试你的cookie是否像这样存在

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

如果没有，将返回未定义

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>