CODEWITHSUNDEEP
javascriptjqueryhtmlbootstrap-modal
cdi
cdi

Reputation: 3

How to make a pop up appear just once with js?

I'm trying to create a cookie which expires in 30 sec. If the users refresh the page between this 30 sec, the popup should not pop just when cookie has expired. Users should see it if they refresh the page after 30 sec. My problem is that it keeps popping up, it does not stop. How I can stop that? 

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Bootstrap Core CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <!-- Latest jQuery Library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <!-- Bootstrap Core JS -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <!-- Cookie JS for Modal -->
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.min.js"></script>
  <script type="text/javascript">
	$(document).ready(function(){
		$("#myModal").modal('show');
		
	});
	
	
</script>
<script>
   function createCookie(name) {
   debugger;
   var date = new Date();
   date.setTime(date.getTime()+(30*1000));
  // alert(date);
   var expires = "; expires="+date.toString();
   document.cookie = name+"="+expires+"; path=/";
//alert(document.cookie);
}
function showbanner()
{
document.write('<div class="container-fluid"><div id="myModal" class="modal fade">    <div class="modal-dialog">        <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h3>REGISTER FOR FALL SESSION</h3></div><div class="modal-body"><div class="row"><div class="col-xs-12 col-sm-6"> <img src="gym.png" alt="gym_promo" style="width:304px;"></div><div class="col-xs-12 col-sm-6"><h3> Reserve Your Spot Today </h3><p> EMAIL : <a href="mailto:[email protected]" target="_top">[email protected] </a> </p><p>OR CALL :<a href="514-795-4266"> 514-795-4266</a> </p> </div></div></div> </div> </div></div></div>');
 
}
  </script>
  
</head>

<body>
<script>
var ban = document.cookie;

createCookie('banner');
if(ban==""){
showbanner();
}

</script>


  

</body>
</html>

Upvotes: 0

Views: 438

Answers (1)

Namaskar
Namaskar

Reputation: 2109

I would use localStorage over cookies. Don't worry about expiration, just save the current date on load and check if it is more than 30 seconds than the last load:

var lastVisited = window.localStorage.getItem('last visited');
console.log(
  'It has been',
  Date.now() - 5000 > Date.parse(lastVisited) ? 'more' : 'less',
  'than 5 seconds since your last visit.'
)
window.localStorage.setItem('last visited', new Date());

Full page: 

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Bootstrap Core CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <!-- Latest jQuery Library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <!-- Bootstrap Core JS -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <!-- Cookie JS for Modal -->
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $("#myModal").modal('show');

    });
  </script>
  <script>
    function showBanner(name) {
      var lastVisited = window.localStorage.getItem('last visited');
      if (lastVisited == null || Date.now() - 5000 > Date.parse(lastVisited)) {
        document.write('<div class="container-fluid"><div id="myModal" class="modal fade">    <div class="modal-dialog">        <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h3>REGISTER FOR FALL SESSION</h3></div><div class="modal-body"><div class="row"><div class="col-xs-12 col-sm-6"> <img src="gym.png" alt="gym_promo" style="width:304px;"></div><div class="col-xs-12 col-sm-6"><h3> Reserve Your Spot Today </h3><p> EMAIL : <a href="mailto:[email protected]" target="_top">[email protected] </a> </p><p>OR CALL :<a href="514-795-4266"> 514-795-4266</a> </p> </div></div></div> </div> </div></div></div>');
      }
      window.localStorage.setItem('last visited', new Date());
    }
    showBanner();
  </script>
</head>
<body>
</body>
</html>

Upvotes: 1

Related Questions