Question

我试图创建一个每月只弹出一次的div。点击它后，我想要一个cookie，以确保它不会再出现。

该块消失了，但是一旦刷新页面，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

使用cookie隐藏div的问题

1 个答案: