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

JavaScript
1

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: The stylesheet and js.

<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>
  1. The in page javascript:
 <script>
    $(document).ready(function(){
        $("#myModal").modal('show');
    });
</script>
  1. The HTML Code
<div id="myModal" class="modal fade" style="padding-top:30%;">
      <div class="modal-dialog">
    My Content of pop up is here.
    
       </div>
            
</div>

Any help is appreciated!

2

You would need to make a note of when you show the modal and then every time before you want to show it first check when it was last shown. If it’s less than a day don’t show it.

The easiest way would be to drop a cookie that expires in a day. If the cookie exists, don’t show the popup.

3

Can you please guide how I can achieve that because I tried below code and didn’t show anything.

<script type="text/javascript"> 
$(document).ready(function(){ // if the cookie doesn't exist create it and show the modal 
if ( ! $.cookie('hereTodayx') ) { // create the cookie. Set it to expire in 1 day 
$.cookie('hereTodayx', true, { expires: 1 }); //call the reveal modal var delay=5000; //in ms, this would mean 5 seconds setTimeout(function(){ $("#myModal").modal('show'); },delay); } }); </script>
4

It looks like you commented out the code that shows the modal. Of course it won’t show then.

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.