Question

例如，在这个例子中我无法实现的是动态倒计时..

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

正如你在上面所说的那样，我有时间是强大，它必须是倒计时

＆＃13;

$(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);

});

＆＃13;

<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>

＆＃13;

Answer 1

你可以这样做。我改变了你的代码

$(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

仅在触发事件“显示”时隐藏模态。在这种情况下，模态现在在15秒后关闭。您只需要在显示的事件上隐藏模态。尝试使用此代码

$(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>

Answer 3

这是另一个解决方案

$(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);
});

倒计时与settimeout

3 个答案: