javascript - 第一次关闭div，10分钟后不会再出现

Question

情况是这样的:

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>

Answer 1

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>

您可以执行以下操作-

1. 如果盒子被关闭，保留一个变量来存储。
   让 isClosed = false;
   在 hide() 函数中将其值设置为 true。
2. 在检查 滚动偏移 的同时，还要检查 isClosed 的值。
   if(!isClosed && window.pageYOffset >= 800 ){...
3. 一旦超时结束，使用 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);