Question

我在最后确定这个弹出式块和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文件中此“弹出窗口”的显示值是“阻止”，或者未设置（= default =“block”），因此您看到的剪辑。

裁剪是由于在javascript代码运行之前显示的内容并隐藏了该元素。

使用cookie显示div

1 个答案: