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

vwoqyblh  于 2023-04-05  发布在  jQuery
关注(0)|答案(8)|浏览(196)

这个问题已经有了答案,但我仍然不确定它是如何工作的。
我在我的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>

但这就是我所理解的,谁能告诉我添加了cookie的JS/jQuery应该是什么样子?
谢谢
詹姆斯

vaqhlq81

vaqhlq811#

您可能会使用API从数据库中获取用户,因此使用任何唯一的数据,如ID或电子邮件或名称来识别用户,然后使用@Shaunak D建议的localstorage方法。
Like:ID:popup_state
很抱歉回复中的错误。我今天不在电脑上😅😛

628mspwn

628mspwn2#

<script>
    $(window).load(function(){
        if(localStorage.getItem('quiz-popup') != 'true'){
        $('.popup-wrap').delay(100).fadeIn(100);
    }

    $('.btn-close').click(function() 
    {
        $('.popup-wrap').fadeOut(100);
        localStorage.setItem('quiz-popup','true')
        
    });

 });

</script>
dgtucam1

dgtucam13#

  • 注意:这将显示弹出每个浏览器一次,因为数据存储在浏览器内存中。

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

∮ ∮ ∮ ∮

unftdfkk

unftdfkk4#

此示例使用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(); 
    });
};
3gtaxfhh

3gtaxfhh5#

你可以使用php来解决这个问题。你只需要在第一个页面加载时回显弹出窗口的代码。
另一种方法...是设置一个cookie,它基本上是一个文件,位于您的浏览器中,包含某种数据。在第一个页面加载时,您将创建一个cookie。然后,在此后的每一个页面上,您都会检查您的cookie是否已设置。如果已设置,则不显示弹出窗口。但是,如果未设置,则设置cookie并显示弹出窗口。
伪码:

if(cookie_is_not_set) {
    show_pop_up;
    set_cookie;
}
eqoofvh9

eqoofvh96#

为使用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();
    }
}
xjreopfe

xjreopfe7#

您可以使用localStorageremoveItem()类在浏览器关闭时销毁该密钥:

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

bcs8qyzn8#

代码只显示一次弹出窗口(Bootstrap模式的情况下):

  • modal.js*
$(document).ready(function() {
     if (Cookies('pop') == null) {
         $('#ModalIdName').modal('show');
         Cookies('pop', '365');
     }
 });

以下是Rails的完整代码片段:
将上面的脚本添加到js repo**(在Rails中:app/javascript/packs)**
在Rails中,我们有一个特定的脚本打包方式,所以:
1.下载js-cookie插件(需要使用Javascript Cokkies)https://github.com/js-cookie/js-cookie(名称应该是:'js.cookie.js')

/*!
 * JavaScript Cookie v2.2.0
 * https://github.com/js-cookie/js-cookie
 *
 * Copyright 2006, 2015 Klaus Hartl & Fagner Brack
 * Released under the MIT license
 */
;(function (factory) {
  var registeredInModuleLoader = false;
  if (typeof define === 'function' && define.amd) {
    define(factory);
    registeredInModul
 ...

1.将//= require js.cookie添加到 application.js
它将完美地工作365天!

相关问题