使用cookie顯示div

我在完成此彈出塊和cookie時遇到問題。基本上我需要將div顯示給新訪問者（每30天），並在點擊關閉圖標後保持關閉狀態，如果他們改變了頁面並且沒有點擊關閉它，應該再次彈出。如果他們點擊關閉，它應該會在所有頁面上消失，直到30天后纔會顯示。目前它幾乎可以工作，除了當你改變頁面時，div有時會閃爍並快速顯示，但隨後消失 - 我不能爲我的生活找出原因。使用cookie顯示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"; 
    } 
}

來源

2014-02-27 user3206244

問題是最有可能是這個「彈出」，在CSS文件中的顯示值是「塊」，或沒有設置（=默認=「塊」），因此你看到的剪輯。

剪輯是由於在JavaScript代碼運行並隱藏元素之前顯示的內容。

來源

2014-02-27 13:12:19

啊哈非常感謝Bartdude的一小部分！我明白你的意思，但是什麼改變呢？在java腳本顯示它之前，css中的display沒有顯示出來嗎？ – user3206244

我在CSS中看不到'display：none'，並且在HTML中設置的inline'display：block'將反正否決CSS規範...因此，請更改CSS並刪除內聯樣式，這是不好的做法。 –

感謝您的回覆Bartdude！好的，我刪除了內聯顯示none並將它添加到div＃theLink css，但是div在Ive單擊關閉按鈕並導航到另一個頁面後仍然顯示。你可以在這裏看到一個例子www.marktoe.co.za – user3206244

兩個可能的解決方案

a）你應該做的正好相反，就是默認股利不應該出現，這意味着display:none在樣式表&如果cookie尚未與的幫助設置，那麼用戶Java腳本使DIV可見

這是因爲DIV獲得可見的，因爲div有顯示的CSS屬性：塊，默認情況下

一旦頁面已經加載JavaScript的唯一得到執行。

B）編寫JavaScript寫的DIV下方，使其得到儘快DIV得到加載執行（但可能會顯示第二）

來源

2014-02-27 13:17:14 sanjeev

使用cookie顯示div

回答

相關問題