web-dev-qa-db-fra.com

Afficher un pop-up seulement une fois par utilisateur

Il y a déjà eu des réponses à cette question mais je ne sais toujours pas comment cela fonctionne.

J'utilise le code HTML suivant dans mon footer.php:

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

et le Javascript suivant:

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

Tout fonctionne très bien, mais je souhaite afficher uniquement la fenêtre contextuelle une fois par utilisateur (peut-être en utilisant le cookie utilisé dans tous les messages du forum), mais je ne sais pas exactement comment l'intégrer dans le JS ci-dessus.

Je sais que je devrai charger le cookie JS dans mon pied de page avec ceci:

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

Mais c’est tout ce que je comprends. Quelqu'un peut-il me dire exactement à quoi devrait ressembler JS/jQuery avec les cookies ajoutés?

Merci

James

javascriptjquerycookies
22
James Waterhouse

Cet exemple utilise jquery-cookie

Vérifiez si le cookie existe et n’a pas expiré - si l’un d’eux échoue, affichez la fenêtre contextuelle et définissez le cookie (pseudo-code semi):

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(); 
    });
};
4
Calvin deClaisse-Walford

Vous pouvez contourner ce problème en utilisant php. Vous ne répétez que le code de la fenêtre contextuelle lors du chargement de la première page. 

L'autre façon ... consiste à définir un cookie, qui est essentiellement un fichier situé dans votre navigateur et contenant un certain type de données. Sur la première page, vous créez un cookie. Ensuite, chaque page après, vous vérifiez si votre cookie est défini. S'il est défini, ne pas afficher la fenêtre contextuelle. Toutefois, s'il n'est pas défini, définissez le cookie et affichez le menu contextuel.

Pseudo code:

if(cookie_is_not_set) {
    show_pop_up;
    set_cookie;
}
2
Bioto

Vous pouvez utiliser la classe removeItem() de localStorage pour détruire cette clé dans un navigateur proche avec 

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

Le code pour afficher une seule fois le popup (Bootstrap Modal dans le cas):

modal.js

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

Voici l'extrait de code complet pour Rails:

Ajoutez le script ci-dessus à votre repo js (dans Rails: app/javascript/packs)

Dans Rails, nous avons une méthode d’emballage spécifique pour le script, ainsi: 

  1. Téléchargez le plugin js-cookie (nécessaire pour utiliser Javascript Cokkies) https://github.com/js-cookie/js-cookie (le nom doit être: '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. Ajoutez //= require js.cookie à application.js

Cela fonctionnera parfaitement pendant 365 jours!

0
Gregdebrick

Offrant une réponse rapide aux personnes utilisant Ionic. Je n'ai besoin d'afficher une info-bulle qu'une seule fois. J'ai donc utilisé $ localStorage pour y parvenir. Ceci est destiné à la lecture d’une piste. Ainsi, lorsqu’ils jouent, l’affichage de l’info-bulle s’affiche une fois.

$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();
    }
}
0
Kyle Pennell