JavaScript Cookie会在瞬间闪烁隐藏的DIV

JavaScript Cookie flashes hidden DIV for split second

本文关键字：隐藏 DIV 闪烁 瞬间 Cookie JavaScript      更新时间：2023-09-26

我的页面上有一个弹出式灯箱，我还有一个使用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()">

只需在原始HTML:中为div提供display:none样式，即可从一开始就将其隐藏起来

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

然后，如果需要，您拥有的onload事件处理程序将显示它。这样，当页面正在加载但事件尚未触发时，它永远不会显示。

相关文章：