情况是这样的:
1) 我们需要一个框 (div),它只在用户滚动一半页面时显示。
2) 如果用户第一次关闭了盒子,我们希望盒子能够记住。 它至少在 10 分钟内不会再次出现在用户面前。
你能帮帮我吗,我写了一些代码, 我可以关闭/隐藏该框,但当我再次向下滚动时,它再次出现,但该框并没有真正消失。
不用jquery,纯javascript,帮我完成这个
我的关闭框代码:
function hide()
{
document.getElementById('popup').style.display = 'none';
};
向下滚动时显示框的代码:
window.addEventListener("scroll",function()
{
if (window.pageYOffset >= 800 )
{
document.getElementById('popup').style.display = "block";
}
}, false);
如果你需要例如html代码:
<div id="popup" class="popup-container">
<form action="#" class="popup-form">
</form>
<div class="popup-close">
<span class="fa fa-close" onclick="hide()"></span>
</div>
</div>
最佳答案
let isClicked = false;
window.addEventListener("scroll", function () {
if (!isClicked && window.pageYOffset >= 800) {
document.getElementById('popup').style.display = "block";
}
}, false);
function hide() {
document.getElementById('popup').style.display = 'none';
isClicked = true;
setTimeout(() => {
isClicked = false;
}, 10 * 60 * 1000);
};
<div style="background-color: #f2f2f2; height: 1200px;">
Content div
</div>
<div id="popup" class="popup-container">
<form action="#" class="popup-form">
POP UP
</form>
<div class="popup-close">
<span onclick="hide()">X</span>
</div>
</div>
您可以执行以下操作-
- 如果盒子被关闭,保留一个变量来存储。
让 isClosed = false;
在hide()
函数中将其值设置为 true。 - 在检查
滚动偏移
的同时,还要检查isClosed
的值。
if(!isClosed && window.pageYOffset >= 800 ){...
- 一旦超时结束,使用
setTimeout()
重置isClosed
的值。
这是一个脚本示例-
let isClosed = false;
function hide() {
document.getElementById('popup').style.display = 'none';
isClosed = true;
setTimeout(function() {
isClosed = false;
}, 10 * 60 * 1000);
};
window.addEventListener("scroll",function(){
if(!isClosed && window.pageYOffset >= 800 ){
document.getElementById('popup').style.display = "block";
}
}, false);
关于javascript - 第一次关闭div,10分钟后不会再出现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52839667/