每个用户只显示一个弹出窗口 [英] Display A Popup Only Once Per User

问题描述

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

There have already been answers to this question but I am still unsure exactly how it works.

我在我的footer.php使用下面的HTML：

I am using the following HTML in my footer.php:

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

和以下Javascript：

and the following 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(); 
    });
});

一切都很棒，但我想只显示每个用户弹出一次所有的论坛帖子继续上去）但我不知道如何将它融入到上面的JS。

Everything works great, but I want to only show the pop up once per user (maybe using the cookie thing all the forum posts go on about) but I do not know exactly how to incorporate it into the JS above.

我知道我将加载cookie在我的页脚与此：

I know that I will have to load the cookie JS in my footer with this:

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

但是这是我的理解，任何人都可以告诉我JS / jQuery应该如何看

But that is all I understand, can anyone tell me exactly how the JS/jQuery should look with the cookie stuff added?

感谢

James

推荐答案

*注意：由于数据存储在浏览器内存中，因此每个浏览器都会显示一次弹出窗口。

*Note : This will show popup once per browser as the data is stored in browser memory.

localStorage 。

Try HTML localStorage.

方法：

• localStorage.getItem（'key'）;


• localStorage.setItem（'key'，'value'）;

• 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(e) // You are clicking the close button
    {
        $j('#popup').fadeOut(); // Now the pop up is hiden.
    });
});

这篇关于每个用户只显示一个弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！