I want an image to close and start a countdown of 5 seconds

Navigation
2

I'm trying to make an image rise to the top by clicking on it below. Once you have uploaded I want you to click (click here to close) I want you to start a 5 second countdown and then close when you finish those 5 seconds. It's kind of an advertisement. See here on the website: > > link 

jQuery.cookie = function(key, value, options) {
  // key and at least value given, set cookie...
  if (arguments.length > 1 && String(value) !== "[object Object]") {
    options = jQuery.extend({}, options);
    if (value === null || value === undefined) {
      options.expires = -1;
    }
    if (typeof options.expires === 'number') {
      var days = options.expires,
        t = options.expires = new Date();
      t.setDate(t.getDate() + days);
    }
    value = String(value);
    return (document.cookie = [
      encodeURIComponent(key), '=',
      options.raw ? value : encodeURIComponent(value),
      options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
      options.path ? '; path=' + options.path : '',
      options.domain ? '; domain=' + options.domain : '',
      options.secure ? '; secure' : ''
    ].join(''));
  }

  // key and possibly options given, get cookie...
  options = value || {};
  var result, decode = options.raw ? function(s) {
    return s;
  } : decodeURIComponent;
  return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1005]) : null;
};

jQuery(document).ready(function($) {
  if ($.cookie('popup_facebook_box') != 'yes') {
    $('#fbox-background').delay(5000).fadeIn('medium');
    $('#fbox-button, #fbox-close').click(function() {
      $('#fbox-background').stop().fadeOut('medium');
    });
  }
  $.cookie('popup_facebook_box', 'yes', {
    path: '/',
    expires: 1
  });
});
#fbox-display {
  background: url(https://i.imgur.com/txK4QBP.png);
  border: 0px solid gray;
  padding: 1px;
  width: 350px;
  height: 237px;
  position: fixed;
  top: 32%;
  left: 35%;
}

.st_font {
  background: #B6000000;
  color: #FFF;
  padding: 5px;
  font-size: 16px;
}

img#fbox-close {
  position: absolute;
  top: 100%;
  left: 0px;
  width: 350px;
  height: 40px;
  z-index: 2147483646;
  margin: 0;
  padding: 0;
  cursor: pointer;
  border-radius: 5px;
}

#fbox-link,
#fbox-link a.visited,
#fbox-link a,
#fbox-link a:hover {
  color: #aaaaaa;
  font-size: 9px;
  text-decoration: none;
  text-align: center;
  padding: 5px;
}

#fbox-background {
  display: block;
  background: rgba(0, 0, 0, 0.8);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='fbox-background'>

  <div id='fbox-display'>
    <img id="fbox-close" src="https://i.imgur.com/TdlMROf.jpg"><divclass="st_font">

      <div id='fbox-button'></div>
    </div>




  </div>
</div>
    
asked by anonymous 22.02.2018 / 00:52

2 answers

2

Use setInterval with value 1000 to generate the counter in seconds. In the first click, the "Close" button will go to the top of div , and in the second click it will show the div of the counter and trigger the count.

For this you have to create the div where the count will be. Insert your styles into your CSS: 

#aguarde{
   background: #ddd;
   width: 40%;
   height: 40%;
   align-items: center;
   justify-content: center;
   text-align: center;
   position: relative;
   font-weight: bold;
   z-index: 999;
   left: 50%;
   top: 50%;
   margin-left: -20%;
   margin-top: -16%;
   display: none;
}

#aguarde b{
   position: absolute;
   top: -18px;
   width: 100%;
   background: #fff;
}

#aguarde span{
   font-size: 1.5em;
}

And enter in the HTML the% of count%: 

<div id='fbox-background'>
   <div id='fbox-display'>
      <img id="fbox-close" src="https://i.imgur.com/TdlMROf.jpg"><divclass="st_font">
         <div id='fbox-button'></div>
      </div>

      <!-- div da contagem -->
      <div id="aguarde">
         <b>ESPERE FECHAR</b>
         <span>5</span>
      </div>
      <!-- div da contagem -->

   </div>
</div>

And the JS with the events: 

$('#fbox-button, #fbox-close').click(function() {

   var el = $('#fbox-close');

   if(parseInt(el.css('top')) < 0){

      $('#aguarde').css('display','flex');
      el.hide();

     var contador = 5,
     tempo = setInterval(function(){

        if(contador == 0){
           clearInterval(tempo);
           $('#fbox-close, #fbox-background').hide();
        }else{
           contador--;
           $('#aguarde span').text(contador);
        }
     }, 1000);

   }

   el.css('top','-'+el.height()+'px');

});

See working at JSFiddle

    
22.02.2018 / 01:57
0
  

Use Javascript setTimeout : 

jQuery(document).ready(function($) {
  if ($.cookie('popup_facebook_box') != 'yes') {
  $('#fbox-background').delay(5000).fadeIn('medium');
    $('#fbox-button, #fbox-close').click(function() {
      setTimeout(function(){
         $('#fbox-background').stop().fadeOut('medium');
      }, 5000);
   });
  }
 $.cookie('popup_facebook_box', 'yes', {
  path: '/',
  expires: 1
 });
});
    
22.02.2018 / 01:24
How to call an id more than once Text construction, performance question