CODEWITHSUNDEEP
javascripthtmlcss
Higgs Boson
Higgs Boson

Reputation: 23

How to bind my current Popup code in javascript to show the popup only once per day?

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.

Upvotes: 2

Views: 129

Answers (1)

Rosetta
Rosetta

Reputation: 11

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

Upvotes: 1

Related Questions