使用JS Cookie将Cookie添加到Modal

时间:2016-10-31 20:02:09

标签: javascript cookies zurb-foundation

我正在使用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>
&#13;
&#13;
&#13;

任何帮助将不胜感激。

谢谢!

1 个答案:

答案 0 :(得分:0)

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

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

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

如果没有,undefined将返回

  

Cookies.get( '无'); // =&gt;未定义

$(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>