使用Cookie顯示div

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文件中此“彈出窗口”的顯示值是“ block”或未設置（= default =“ block”），因此是您看到的剪輯。

裁剪是由於在javascript代碼運行之前顯示了內容並隱藏了元素。