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的东西？

由于

詹姆斯

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

Working Demo

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

Answer 3

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

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

伪代码：

if(cookie_is_not_set) {
    show_pop_up;
    set_cookie;
}

Answer 4

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

Answer 5

您可以使用<?= \yii\grid\GridView::widget([ ..... 'filterPosition' => \yii\grid\GridView::FILTER_POS_HEADER, ])?>类removeItem()在浏览器关闭时销毁该密钥：

localStorage

Answer 6

仅显示一次弹出窗口的代码（在这种情况下为Bootstrap Modal）：

modal.js

(beforeEventA, beforeEventB, afterEventA, ...)

这是Rails的完整代码段：

将以上脚本添加到您的js存储库（在Rails中：app / javascript / packs）

在Rails中，我们有一种特定的脚本打包方式，因此：

下载js-cookie插件（需要与Javascript Cokkies配合使用）https://github.com/js-cookie/js-cookie（名称应为：'js.cookie.js'）

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

向{em> application.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
 ...

它将完美地运行365天！

Answer 7

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

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

7 个答案:

Working Demo