javascript - 使用 cookie 显示 div

Question

我在完成此弹出 block 和 cookie 时遇到问题。基本上我需要将 div 显示给新访问者(每 30 天一次)并在他们单击关闭图标后保持关闭状态，如果他们更改页面并且没有单击关闭它应该再次弹出。如果他们点击了关闭，它应该会在所有页面上消失，直到 30 天后才会显示。目前它几乎可以工作，除了当您更改页面时，有时 div 会闪烁并快速显示但随后消失 - 我终究无法弄清楚为什么。

谁能帮我完成这项工作的最后一部分，我已经苦苦挣扎了一段时间，一定是遗漏了一些简单的东西。非常感谢!

HTML

<div id = "theLink" style="display:block">
  <?php if($this->countModules('tekenin2')) :      ?>
    <div id="gototop">
      <div id="popup"><a href="#" onclick="parentNode.remove();return false; ">
        <img src="/templates/marktoe/images/close.png" id="close" class="close" border="0" alt="close" /></a>
        <jdoc:include type="modules" name="tekenin2" style="xhtml" />
      </div>
    </div>
  <?php endif; ?>
</div>

CSS

div#theLink {
  width: 500px;
  position: fixed;
  z-index: 99999999;
  top: 15%;
  left: 35%;
}
div#popup {
  border: 2px solid #8CC34A;
  padding: 20px;
  background-color: #FFF;
  width: 500px;
  opacity: 0.95;
  margin: 0;
  -moz-box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.5);
  box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.5);
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}
#popup img.close {
  float: right;
  position: relative;
  z-index: 9999;
  top: 0px;
  right: 0px;
}
.moduletable-nlpopup {
  margin: 0;
  padding: 70px 0 0 0;
  background-repeat: no-repeat;
  background-position: top leftpx;
  border: none;
}
.moduletable-nlpopup h3 {
}
a.toplink {
  font-size:10px;
}
#gototop {
  display:none;
  font-size:10px;
  width:500px;
  font-size:11px;
  text-decoration:none;
  padding:0px;
  height: 300px;
}
#gototop:hover {

}

JavaScript

function createCookie(name,value,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

function eraseCookie(name) {
    createCookie(name,"",-1);
}

function setTheDivStyle() {// body on load event
   if(!readCookie('wroteIt')) {

      // if cookie not found display the div and create the cookie
      document.getElementById("theLink").style.display="block";
      createCookie('wroteIt', 'wroteIt', 1);  // 1 day = 24 hours persistence
   }
   else {
      // if cookie found hide the div
      document.getElementById("theLink").style.display="none";
   }
}

Answer 1

问题很可能是 CSS 文件中此“弹出窗口”的显示值为“ block ”，或未设置(= 默认值 =“ block ”)，因此您看到的是裁剪。

剪辑是由于在 javascript 代码运行和隐藏元素之前显示的内容。