gpt4 book ai didi

JavaScript Cookie 瞬间闪烁隐藏的 DIV

转载 作者:行者123 更新时间:2023-12-03 07:03:36 24 4
gpt4 key购买 nike

我的页面上有一个弹出式灯箱,我还有一个使用 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 标签...

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

最佳答案

只需在原始 HTML 中为 div 赋予 display:none 样式即可从一开始就隐藏它:

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

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

关于JavaScript Cookie 瞬间闪烁隐藏的 DIV,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36921681/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com