Display A Popup Only Once Per User

Question

There have already been answers to this question but I am still unsure exactly how it works   I am using the following HTML in my footer php    lt div id  popup  gt       lt div gt           lt div id  popup-close  gt X lt  div gt               lt h2 gt Content Goes Here lt  h2 gt       lt  div gt   lt  div gt    and the following 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                   Everything works great  but I want to only show the pop up once per user  maybe using the cookie thing all the forum posts go on about  but I do not know exactly how to incorporate it into the JS above   I know that I will have to load the cookie JS in my footer with this    lt script type  text javascript  src  scripts jquery cookies 2 2 0 min js  gt  lt  script gt     But that is all I understand  can anyone tell me exactly how the JS jQuery should look with the cookie stuff added   Thanks  James

User · Answer

The code to show only one time the popup (Bootstrap Modal in the case) :

modal.js

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

Here is the full code snipet for Rails :

Add the script above to your js repo (in Rails : app/javascript/packs)

In Rails we have a specific packing way for script, so :

Download the js-cookie plugin (needed to work with Javascript Cokkies) https://github.com/js-cookie/js-cookie (the name should be : '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
 ...

Add //= require js.cookie to application.js

It will works perfectly for 365 days!

User · Answer

You can use removeItem   class of localStorage to destroy that key on browser close with    window onbeforeunload   function      localStorage removeItem  your key

User · Answer

You could get around this issue using php  You only echo out the code for the popup on first page load    The other way    Is to set a cookie which is basically a file that sits in your browser and contains some kind of data  On the first page load you would create a cookie  Then every page after that you check if your cookie is set  If it is set do not display the pop up  However if its not set set the cookie and display the popup   Pseudo code   if cookie is not set        show pop up      set cookie

User · Answer

The best solution is to save a Boolean value in the database and then obtain that value and validate whether or not the modal was opened for that user  this value could be in the user table for example

User · Answer

Note   This will show popup once per browser as the data is stored in browser memory  Try HTML localStorage  Methods    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               Working Demo

User · Answer

Offering a quick answer for people using Ionic   I need to show a tooltip only once so I used the  localStorage to achieve this   This is for playing a track  so when they push play  it shows the tooltip once    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    lt p class  popuptext  gt Turn Sound On  lt  p gt            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

User · Answer

This example uses jquery-cookie  Check if the cookie exists and has not expired - if either of those fails  then show the popup and set the cookie  Semi pseudo code    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

[javascript] Display A Popup Only Once Per User

Examples related to javascript

Examples related to jquery

Examples related to cookies