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

IT技术 javascript jquery cookies
2021-01-21 19:19:35

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

我在我的 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 内容?

谢谢

詹姆士

6个回答

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

尝试 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.
    });
});

工作演示

@KobeBryan 您可以使用 sessionStorage 以便在您关闭浏览器窗口时它会自动重置。
2021-03-18 19:19:35
该解决方案实际上会为每个浏览器而不是每个用户显示一次弹出窗口
2021-03-19 19:19:35
方法搞定了
2021-03-19 19:19:35

此示例使用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(); 
    });
};
去吧,这就是这个网站的全部内容。如果它有效并且运行良好,请坚持下去。
2021-03-17 19:19:35
感谢您的快速回复 Calvin,在阅读了 HTML 5 Storage 之后,它似乎是更快更安全的选择!
2021-03-27 19:19:35
新的 doumentation在这里你可以像这样使用它:Cookies.set('popup', 'seen', { expires: 30, path: '/' });
2021-04-10 19:19:35

您可以使用 php 解决此问题。您只在第一页加载时回显弹出窗口的代码。

另一种方式......是设置一个cookie,它基本上是一个位于浏览器中并包含某种数据的文件。在第一页加载时,您将创建一个 cookie。然后在此之后的每个页面检查您的 cookie 是否已设置。如果已设置,则不显示弹出窗口。但是,如果未设置,请设置 cookie 并显示弹出窗口。

伪代码:

if(cookie_is_not_set) {
    show_pop_up;
    set_cookie;
}
感谢您的快速回复 Nicolas,在阅读了 HTML 5 Storage 之后,它似乎是更快更安全的选择!
2021-04-06 19:19:35

为使用 Ionic 的人提供快速答案。我只需要显示一次工具提示,所以我使用 $localStorage 来实现这一点。这是用于播放曲目,因此当他们按下播放时,它会显示一次工具提示。

$scope.storage = $localStorage; //connects an object to $localstorage

$scope.storage.hasSeenPopup = "false";  // they haven't seen it


$scope.showPopup = function() {  // popup to tell people to turn sound on

    $scope.data = {}
    // An elaborate, custom popup
    var myPopup = $ionicPopup.show({
        template: '<p class="popuptext">Turn Sound On!</p>',
        cssClass: 'popup'

    });        
    $timeout(function() {
        myPopup.close(); //close the popup after 3 seconds for some reason
    }, 2000);
    $scope.storage.hasSeenPopup = "true"; // they've now seen it

};

$scope.playStream = function(show) {
    PlayerService.play(show);

    $scope.audioObject = audioObject; // this allow for styling the play/pause icons

    if ($scope.storage.hasSeenPopup === "false"){ //only show if they haven't seen it.
        $scope.showPopup();
    }
}

您可以使用removeItem()class oflocalStorage在浏览器关闭时销毁该键:

window.onbeforeunload = function{
    localStorage.removeItem('your key');
};