每个用户仅显示一次弹出窗口

Question

这个问题已经有了答案，但我仍然不确定它到底是如何工作的。

我在我的 footer.php 中使用以下 HTML：

 <div id="popup">
    <div>
        <div id="popup-close">X</div>
            <h2>Content Goes Here</h2>
    </div>
</div>

和以下Javascript：

 $j(document).ready(function() {
    $j("#popup").delay(2000).fadeIn();
    $j('#popup-close').click(function(e) // You are clicking the close button
    {
    $j('#popup').fadeOut(); // Now the pop up is hiden.
    });
    $j('#popup').click(function(e)
    {
    $j('#popup').fadeOut();
    });
});

一切都很好，但我只想为每个用户显示一次弹出窗口（可能使用所有论坛帖子都在谈论的 cookie），但我不知道如何将它合并到上面的 JS 中。

我知道我将不得不在我的页脚中加载 cookie JS：

 <script type="text/javascript" src="scripts/jquery.cookies.2.2.0.min.js"></script>

但这就是我所了解的，谁能确切地告诉我 JS/jQuery 在添加了 cookie 的情况下应该是什么样子？

谢谢

詹姆士

原文由 James Waterhouse 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

*注意：这将在每个浏览器中显示一次弹出窗口，因为数据存储在浏览器内存中。

试试 HTML localStorage 。

方法 ：

• localStorage.getItem('key');
• localStorage.setItem('key','value');

---

 $j(document).ready(function() {
    if(localStorage.getItem('popState') != 'shown'){
        $j('#popup').delay(2000).fadeIn();
        localStorage.setItem('popState','shown')
    }

    $j('#popup-close, #popup').click(function() // You are clicking the close button
    {
        $j('#popup').fadeOut(); // Now the pop up is hidden.
    });
});

工作演示

原文由 Shaunak D 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这个例子使用 jquery-cookie

检查 cookie 是否存在且未过期 - 如果其中任何一个失败，则显示弹出窗口并设置 cookie（半伪代码）：

 if($.cookie('popup') != 'seen'){
    $.cookie('popup', 'seen', { expires: 365, path: '/' }); // Set it to last a year, for example.
    $j("#popup").delay(2000).fadeIn();
    $j('#popup-close').click(function(e) // You are clicking the close button
        {
        $j('#popup').fadeOut(); // Now the pop up is hiden.
    });
    $j('#popup').click(function(e)
        {
        $j('#popup').fadeOut();
    });
};

原文由 Calvin deClaisse-Walford 发布，翻译遵循 CC BY-SA 3.0 许可协议