display div using cookie

Question

I am having a problem finalizing this popup block and cookie. Basically I need the div to be displayed to a new visitor (every 30 days) and stay closed once they click the close icon, if they change pages and haven't clicked close it should then pop up again. If they have clicked close it should disappear on all pages and not be shown until after 30 days. At the moment it almost works except that when you change pages that sometimes the div will flash and display quickly but then disappear - I cant for the life of me figure out why.

Could anyone please help me get the final part of this working, Ive been struggling for a while and must be missing something simple. Many thanks!

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

The problem is most probably that the display value of this "popup" in CSS file is "block", or not set (= default = "block") , therefore the clipping that you see.

The clipping is due to the content being displayed before javascript code runs and hide the element.