Countdown with settimeout

Question

example there is something that I couldn't achieve in this example is dynamically countdown..

<span class="will-close">will be closed after : <strong>n</strong> seconds</span>

as youu see in above part I have time which is in strong and it must be countdown

$(function() {
  setTimeout(function(e) {
    $('#AniPopup').modal('show');
    $(".will-close strong").html($("#AniPopup").attr("data-close"));
  }, parseInt($('#AniPopup').attr('data-open')) * 1000);
  setTimeout(function(e) {
    $('#AniPopup').modal('hide');
  }, parseInt($('#AniPopup').attr('data-close')) * 1000);

});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="modal fade" id="AniPopup" tabindex="-1" role="dialog" aria-labelledby="AniPopupLabel" aria-hidden="true" data-close="15" data-open="2" data-src="https://www.youtube.com">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="memberModalLabel">Popup Header</h4>
      </div>
      <div class="modal-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis, quas.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
        <span class="will-close">will be closed after : <strong>n</strong> seconds</span>
      </div>
    </div>
  </div>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 1

You can do like this. I changed your code a bit

$(function() {
  var popup = $('#AniPopup');
  var time = $(".will-close strong");
  var closeSeconds = $("#AniPopup").attr("data-close");
  var openSeconds = $("#AniPopup").attr("data-open");
  
  setTimeout(function(e) {
    
    popup.modal('show');
    time.html(closeSeconds);
    
    var interval = setInterval(function(){
      time.html(closeSeconds);
      closeSeconds--;
      
      if(closeSeconds < 0){
        popup.modal('hide');
        clearInterval(interval);
      }
      
    }, 1000)
    
  }, openSeconds * 1000);
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="modal fade" id="AniPopup" tabindex="-1" role="dialog" aria-labelledby="AniPopupLabel" aria-hidden="true" data-close="15" data-open="2" data-src="https://www.youtube.com">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="memberModalLabel">Popup Header</h4>
      </div>
      <div class="modal-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis, quas.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
        <span class="will-close">will be closed after : <strong>n</strong> seconds</span>
      </div>
    </div>
  </div>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 2

Here is another Solution

$(function() {
    var seconds   = $(".will-close strong");
    var interval  = $("#AniPopup").attr("data-close");
    var popuptime = $("#AniPopup").attr("data-open")*1000; /*Seconds To miliseconds*/
    var IntervalHandler = 0;

    function Timer(){
         seconds.text(interval);
         interval--;
         if(interval < 0){
            $('#AniPopup').modal('hide');
            clearInterval(IntervalHandler);        /*Clear/Stop Timer Countdown*/
         }
    }

    setTimeout(function(e) {
        $('#AniPopup').modal('show');
        seconds.text(interval);
        IntervalHandler = setInterval(Timer,1000); /*Start countdown Timer*/
      },popuptime);
});

Answer 3

Hide the modal only when the event 'shown' is triggered. In this case, the modal now closes after 15 seconds. You just need to hide the modal on shown event.Try using this code

$(function() {
  setTimeout(function(e) {
    $('#AniPopup').modal('show');
    $(".will-close strong").html($("#AniPopup").attr("data-close"));
  }, parseInt($('#AniPopup').attr('data-open')) * 1000);
  setTimeout(function(e) {
    $('#AniPopup').on('shown').modal('hide');
  }, parseInt($('#AniPopup').attr('data-close')) * 1000);

});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="modal fade" id="AniPopup" tabindex="-1" role="dialog" aria-labelledby="AniPopupLabel" aria-hidden="true" data-close="15" data-open="2" data-src="https://www.youtube.com">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="memberModalLabel">Popup Header</h4>
      </div>
      <div class="modal-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis, quas.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
        <span class="will-close">will be closed after : <strong>n</strong> seconds</span>
      </div>
    </div>
  </div>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>