1

I'm trying to display a popup once per day using cookies, but it's not working. Here's the html, css & js: 

function showpopup() {

  var id = '#dialog';
  var maskHeight = $(document).height();
  var maskWidth = $(window).width();
  $('#mask').css({
    'width': maskWidth,
    'height': maskHeight
  });
  $('#mask').fadeIn(500);
  $('#mask').fadeTo("slow", 0.9);
  var winH = $(window).height();
  var winW = $(window).width();
  $(id).css('top', winH / 2 - $(id).height() / 2);
  $(id).css('left', winW / 2 - $(id).width() / 2);
  $(id).fadeIn(2000);
  $('.window .close').click(function(e) {
    e.preventDefault();
    $('#mask').hide();
    $('.window').hide();
  });
  $('#mask').click(function() {
    $(this).hide();
    $('.window').hide();
  });

}
$(function() {
  if ($.cookie('alreadyShow') === null) {
    $.cookie('alreadyShow', true, {
      expires: 1
    });
    showpopup();
  }
});
#mask {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9000;
  background-color: #26262c;
  display: none;
}

#boxes .window {
  position: absolute;
  left: 0;
  top: 0;
  width: 440px;
  height: 850px;
  display: none;
  z-index: 9999;
  padding: 20px;
  border-radius: 5px;
  text-align: center;
}

#boxes #dialog {
  width: 450px;
  height: auto;
  padding: 10px 10px 10px 10px;
  background-color: #ffffff;
  font-size: 15pt;
}

.agree:hover {
  background-color: #D1D1D1;
}

.popupoption:hover {
  background-color: #D1D1D1;
  color: green;
}

.popupoption2:hover {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://lab.alexcican.com/set_cookies/cookie.js"></script>
<div id="boxes">
  <div style="top: 50%; left: 50%; display: none;" id="dialog" class="window">
    <div id="san">
      <a href="#" class="close agree">
        <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-close-512.png" width="25" style="float:right; margin-right: -10px; margin-top: -10px;" alt="" />
      </a>
      <br><br> Visit our new website: <a style="color:blue" target="_blank" href="www.example.come">Example.com</a>.
    </div>
  </div>
  <div id="mask"> </div>
</div>
benvc
  • 14,448
  • 4
  • 33
  • 54
Mariam Ghalleb
  • 111
  • 8
  • 2
    You're missing a `>` at the end of the first ` – Barmar Oct 22 '18 at 21:12
  • You have declared the function where you check for cookie, but it does not get called ever. Try moving the cookie condition check in the showPopup function as its initial validation in the function. So you would first check if the cookie exists and if not then set the cookie value and proceed with showing popup. The other option is to give this other function a name and actually call this function from the Div instead of showPopup() – adityap Oct 22 '18 at 21:14
  • @adityap - I think you didn't follow the code correctly, as it is doing exactly what you suggest. `showpopup()` gets called from inside the IIFE if there's no cookie. – David Oct 22 '18 at 21:20
  • @David - You are right, sorry about that. Please ignore my comments – adityap Oct 22 '18 at 21:27
  • thank you, any idea how to fix it please? – Mariam Ghalleb Oct 22 '18 at 21:30
  • @Barmar is it fixed it now? i think it's a copying error. i didn't have console errors – Mariam Ghalleb Oct 22 '18 at 21:32
  • It is worth noting that you are using a old version of this cookie library (and not using `https`). Check the project in [GitHub](https://github.com/js-cookie/js-cookie) and point to a more [up-to-date CDN](https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js). – David Oct 22 '18 at 21:39

1 Answers1

0

Your problem is the condition below:

if ($.cookie('alreadyShow') === null)

When the cookie is not set $.cookie() returns undefined.
Maybe you want to read about the difference between undefined and null.

Whatever of the next statements will work:

if ($.cookie('alreadyShow') === undefined)
if ($.cookie('alreadyShow') == null)
if (!$.cookie('alreadyShow'))

Also, you are using a very old version (v1.4.0) of the js-cookie library. Its author moved the code to a new project after removing the jQuery dependency. You should consider to upgrade and to point out to a proper CDN.

Note that the new project use slightly different semantics. Your code would look like below:

if (!Cookies.get('alreadyShow')) {
  Cookies.set('alreadyShow', true, {
    expires: 1
  });
  showpopup();
}
David
  • 6,695
  • 3
  • 29
  • 46
  • if I use CDN version i get $.cookie is not a function, meanwhile i tried this and didn't work; const tomorrow = new Date(); tomorrow.setDate( tomorrow.getDate() + 1 ); Cookies.set = "popupShown',true, expires=${ tomorrow }"; console.log(Cookies.get('popupShown')); $(function() { if (Cookies.get('popupShown')) { Cookies.set('popupShown', true, {expires: 1}); showpopup(); } }); – Mariam Ghalleb Oct 22 '18 at 22:18
  • That's because the last version uses a different syntax. The code that I posted is supposed to work with yours (and I have tested and for me it is working flawlessly). Try it with the old link that you provided. – David Oct 22 '18 at 22:25
  • Hi , i tried using yours by doing this: $(function() { if (!$.cookie('alreadyShow')) { $.cookie('alreadyShow', true, {expires: 1}); showpopup(); } }); – Mariam Ghalleb Oct 22 '18 at 22:28
  • but the popup keep showing up everytime i refresh the page, isn't suppose to display once a day ? ... – Mariam Ghalleb Oct 22 '18 at 22:29
  • When I test that code the popup shows just the first time, is there something in your setup preventing cookies from being stored? – David Oct 22 '18 at 22:43
  • @MerGh - I updated the answer to include the code for the latest version of *js-cookie* in case you decide to upgrade it. If you still have problems, check for typos, look at the console,try a different browser and ensure that you are not doing something like [this](https://stackoverflow.com/a/47857719/5247200) if you are testing on a local server so we can narrow down the issue. – David Oct 24 '18 at 13:23