JS 饼干 hide/show div

Question

正在尝试使用 JS Cookie 制作一个 jQuery cookie hide/show 框，但我无法让它工作。该框根本不会显示。我正在使用 Shopify。

#pop-up {
    display: none;
}

Jquery:

<script type='text/javascript'>//<![CDATA[
  $(window).load(function(){
  // if no cookie
  if (!$.cookie('alert')) {
      $( "#pop-up" ).show();
      $("#hide").click(function() {
          $( "#pop-up" ).slideUp( "slow" );
          // set the cookie for 24 hours
          var date = new Date();
          date.setTime(date.getTime() + 24 * 60 * 60 * 1000); 
          $.cookie('alert', true, { expires: date });
      });
  }
  });//]]> 
</script>

其余：

<div id="pop-up">
  <div id="center" class="box">
    40% off today only<br>
    <a id="hide" href="#">OK, thanks!</a>
  </div>
</div>

Answer 1

它不起作用，因为您只能在 cookie 中存储 strings。您存储字符串 "true" 而不是布尔值 true.

尝试使用以下代码，我将检查替换为 != "true"。

<script type='text/javascript'>//<![CDATA[
  $(window).load(function(){
  // if no cookie
  if ($.cookie('alert')!="true") {
      $( "#pop-up" ).show();
      $("#hide").click(function() {
          $( "#pop-up" ).slideUp( "slow" );
          // set the cookie for 24 hours
          var date = new Date();
          date.setTime(date.getTime() + 24 * 60 * 60 * 1000); 
          $.cookie('alert', "true", { expires: date });
      });
  }
  });//]]> 
</script>

一个有效的 jsfiddle：http://jsfiddle.net/bqam0qb4/1/

JS 饼干 hide/show div

JS Cookie hide/show div

cookies

jquery

shopify