javascript - 使用cookie隐藏div的问题

Question

我正在尝试创建一个每月仅弹出一次的 div。当你点击它离开后，我想要一个 cookie 以确保它不会再次出现。

该 block 消失了，但是当我刷新页面时，div 又回来了，因此 cookie 似乎不起作用。

我做错了什么？

这是我正在使用的代码:

HTML:

<div id="lightboxz" class="lightbox">
  <table class="lightbox_table">
    <tr>
      <td class="lightbox_table_cell" align="center">
        <div id="lightbox_content">
          <div id="closedat" onclick="Mailsign()"> <i class="fa fa-close"></i> </div> 

          {loadmodule mod_mailchimpsignup}

        </div>
      </td>
    </tr>
  </table>
</div>

JavaScript:

function Mailsign(){

    days=30;
    myDate = new Date();
    myDate.setTime(myDate.getTime()+(days*24*60*60*1000));

    document.cookie = 'Mailsign=Accepted; expires=' + myDate.toGMTString();
    document.getElementById('lightboxz').style.display='none';
}

function CheckCookies(){   
    if ($.cookie("Mailsign") === "Accepted")
    {
        $("#lightboxz").hide();
    } 
}

更新:
cookie 正在安装，因此问题显然出在 CheckCookies 函数上。这可能是 jQuery 与网站上其他 jQuery 代码冲突吗？

Answer 1

这里有几件事 - 您可能希望默认情况下隐藏 div，这样您就不会在短暂的时间内显示然后消失。

<div id="lightboxz" class="lightbox"></div>
.lightbox { display: none; }

您还需要实际调用 CheckCookies()，但请确保在文档准备就绪时执行此操作!即

$(document).ready(function () {
   CheckCookies();
});

我想说，似乎 localStorage 在这种情况下也能正常工作，并且不需要 cookie。

function Mailsign(){
   days=30;
   myDate = new Date();
   myDate.setTime(myDate.getTime()+(days*24*60*60*1000));
   localStorage.setItem('popup', myDate);
}

function CheckCookies(){   
    var today = new Date();
    var showDate = new Date(localStorage.getItem('popup'));
    if (!localStorage.getItem('popup') || today > showDate)
    {
        $("#lightboxz").show();
    } 
}

http://codepen.io/harangue/pen/dMJRMo