2

I am using below code to show a popup on my home page. But the problem is that it shows every time a user reloads the page. Instead of that I would like to be displayed once per day. Here is the code:

$(document).ready(function() {
  $("#myModal").modal('show');
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<div id="myModal" class="modal fade" style="padding-top:30%;">
  <div class="modal-dialog">
    My Content of pop up is here.
  </div>
</div>

I tried to bind it with cookie expiration but I couldn't do it.

Bumhan Yu
  • 2,078
  • 1
  • 10
  • 20
Higgs Boson
  • 23
  • 3
  • Does this answer your question? [Add timeout function to reveal modal with cookie](https://stackoverflow.com/questions/24945226/add-timeout-function-to-reveal-modal-with-cookie) – Yogi Jan 12 '23 at 16:09
  • https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage store a variable with the date https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/now check if the stored value is within a day / exists – This Guy Jan 12 '23 at 16:10
  • 1
    As @ThisGuy noted, you can decide an expiry timeframe (e.g. 24 hours, 7 days, etc), use `localStorage` to store when the user saw this page the last time, compare it with the current time, and choose to show/hide the message. See [this article](https://www.sohamkamani.com/javascript/localstorage-with-ttl-expiry/) for step by step guide. – Bumhan Yu Jan 12 '23 at 16:13
  • @Yogi I tried using like But now popup doesn't appear..... – Higgs Boson Jan 12 '23 at 16:18
  • @BumhanYu I couldn't bind it with my JS.......Can you guide.? – Higgs Boson Jan 12 '23 at 17:30
  • `$.cookie()` is a session cookie that expires when the user leaves ([see this article](https://electrictoolbox.com/jquery-cookies/)). What you're looking for is most likely `localStorage`. I'd still point you to [this article](https://www.sohamkamani.com/javascript/localstorage-with-ttl-expiry/) that walks through the process. In short, whenever a page loads you check if there's a previous visit in `localStorage` and decide whether to show/hide the message and when to expire it. – Bumhan Yu Jan 12 '23 at 18:04

1 Answers1

1

you can do it like this

$(document).ready(function() {
  var todayCodeRecord = localStorage.getItem('today')
  var todayCode = new Date().toLocaleDateString()
  if(todayCodeRecord !== todayCode) {
    $("#myModal").modal('show');
    localStorage.setItem('today', todayCode)
  }
});
Rosetta
  • 11
  • 2
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jan 13 '23 at 13:27