JSFiddle - React, Tailwind, and code Playground

by andrey90vs

HTML

<div class="full-overlay" data-seconds="20" data-interval='["0","0","1", "10"]' data-url="http://google.ro">
  Anuntul tau aici
  <div class="close-overlay">
  Apasa aici pentru a accesa pagina instant.
  </div>
  <div class="timer">
  
  </div>
</div>

CSS

.full-overlay {
  position: fixed;
  width:100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #ccc;
  text-align: center;
  padding: 100px 0;
}
.timer,
.close-overlay {
  cursor: pointer;
  position:fixed;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
}

.timer {
  bottom: 20px;
}

JavaScript

function autoClose(elem) {
	// define variables
	var s = elem.attr('data-seconds'),
  		timer = $(elem).find('.timer'),
      url = elem.attr('data-url'),
      interval = elem.attr('data-interval'),
      days, hours, minutes, seconds;
      if( interval ) {
      	interv = JSON.parse(interval);
        days = interv[0];
        hours = interv[1];
        minutes = interv[2];
        seconds = interv[3];
      }
      
      console.log(days, hours, minutes, seconds);
  
  // show start time countdown
  timer.text(s+'s');
  
  // countdown function + overlay autoclose
	var countdown = setInterval(function() {
      s--;
      timer.text(s+'s');
      if( s === 0 ) {
      	elem.hide();
        clearInterval(countdown);
      }
	}, 1000);
  
  // close overlay
  $('.close-overlay').on('click', function() {
    elem.hide();
     clearInterval(countdown);
  });
}

$(document).ready(function() {
  // call function and set elem
  autoClose($('.full-overlay'));
});