Question

我的页面上有一个弹出式灯箱，我还有一个使用JavaScript的cookie，每15天只显示一个弹出式灯箱。

代码执行我想要它做的事情，除非我不断刷新页面以检查cookie，我的弹出式灯箱在屏幕上闪烁一瞬间然后消失。

如何防止这种情况？

测试页 - http://mymsaa.org/videos/test-lightbox/

我的测试页面上有很多插件用于插件和我的WordPress主题，因此我无法发布整个代码。

Javascript ...

<script type="text/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() {
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";
}
}
</script>

我的弹出式灯箱......

<div id = "theLink" style="display:block"><!--LIGHTBOX-->      

<div class="ezmodal" ezmodal-autoopen="true">
<div class="ezmodal-container">

<!--IFRAME FORM-->                                            
<div id='subscribe_popup' style='overflow: hidden; overflow-y:hidden;'>
<div style="padding: 10px;">

<iframe src="http://mymsaa.org/wp-content/themes/dw-focus/video_register/iframe/iframe.php" border="0" frameborder="0" scrolling="no" name="pop"></iframe>
</div>
</div>
<!--IFRAME FORM--> 

<div class="ezmodal-footer">
<button type="button" class="btn1" data-dismiss="ezmodal">X</button>
</div>

</div>
</div>

<!--LIGHTBOX--></div>

我的身体标签......

<body <?php body_class(); ?> onload = "setTheDivStyle()">

Answer 1

只需在原始HTML中提供div display:none样式即可从头开始隐藏它：

<div id = "theLink" style="display:none"><!--LIGHTBOX-->

然后，您拥有的onload事件处理程序将在必要时显示它。这种方式在页面加载时从不显示，但事件尚未触发。

JavaScript Cookie会暂时隐藏DIV

1 个答案: