[英]display div using cookie
我在完成此弹出框和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";
}
}
问题很可能是CSS文件中此“弹出窗口”的显示值是“ block”或未设置(= default =“ block”),因此是您看到的剪辑。
裁剪是由于在javascript代码运行之前显示了内容并隐藏了元素。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.