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

2020/12/31 23:11 · jquery ·  · 0评论

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

我在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的外观如何吗?

谢谢

詹姆士

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

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

工作演示

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

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

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

伪代码:

if(cookie_is_not_set) {
    show_pop_up;
    set_cookie;
}

为使用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()of类localStorage来销毁该键:

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

该代码仅显示一次弹出窗口(在这种情况下为Bootstrap Modal):

modal.js

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

这是Rails的完整代码片段:

将上面的脚本添加到您的js库中(在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
     ...
    
  2. 添加//= require js.cookieapplication.js

它将完美地运行365天!

最好的解决方案是在数据库中保存一个布尔值,然后获取该值并验证是否为该用户打开了模式,例如,该值可以在用户表中。

本文地址:http://jquery.askforanswer.com/meigeyonghujinxianshiyicidanchuchuangkou.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!