JavaScript Cookie 瞬间隐藏 DIV

Question

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

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

如何防止这种情况发生？

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

我的测试页面上确实有很多用于插件和我的 WordPress 主题的脚本，所以我无法 post 整个代码。

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 标签...

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

Answer 1

通过在原始 HTML 中给 div 一个 display:none 样式从一开始就隐藏它:

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

然后您的 onload 事件处理程序将在必要时显示它。这样它就不会在页面加载但事件尚未触发时显示。

JavaScript Cookie 瞬间隐藏 DIV

JavaScript Cookie flashes hidden DIV for split second

html

javascript

cookies

hidden

lightbox