ブートストラップモーダルの最初の試行後にカウンタ値が正しく動作しない

Question

私は7秒後に自動的にクローズし、ここまでうまくいっているブートストラップモーダルを持っています。

私の問題は、モーダルでもカウンター秒を示しており、最初の試みでうまくいきます。 しかし、は、最初の試行の後に0秒から開始するのではなく、任意の乱数から開始します。私はそれに欠けているものは分かりません。

$(function() { 
 
    $('.thank_you_modal').on('show.bs.modal', function() { 
 

 
    var myModal = $(this); 
 
    clearTimeout(myModal.data('hideInterval')); 
 
    myModal.data('hideInterval', setTimeout(function() { 
 
     myModal.modal('hide'); 
 
    }, 7000)); 
 

 
    var sec = 0; 
 

 
    function pad(val) { 
 
     return val > 9 ? val : "0" + val; 
 
    } 
 
    var timer = setInterval(function() { 
 
     document.getElementById("seconds").innerHTML = pad(++sec % 60); 
 
     document.getElementById("minutes").innerHTML = pad(parseInt(sec/60, 10)); 
 
    }, 1000); 
 

 
    setTimeout(function() { 
 
     clearInterval(timer); 
 
    }, 7000); 
 

 

 

 

 
    }); 
 
});

#custom_modal .modal-content+span { 
 
    color: #fff; 
 
    text-align: center; 
 
    display: block; 
 
    font-size: 12px; 
 
    margin-top: 12px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#" data-toggle="modal" data-target="#custom_modal">Click me</a> 
 

 
<!--.......... Modal ..........--> 
 
<div class="modal fade thank_you_modal" id="custom_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
 
    <div class="modal-dialog modal-sm" role="document"> 
 
    <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> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <h2>Thank You</h2> 
 
     </div> 
 
    </div> 
 
    <span>This message will close in <span id="seconds">00</span> seconds</span> 
 
    </div> 
 
</div> 
 
<!--............Modal Ends........-->

Working Code in Codepen

Answer 1

このコードは、あなたが提供codepenに私のために働いています！

$(function(){ 
    $('.thank_you_modal').on('show.bs.modal', function(){ 

     var myModal = $(this); 
     clearTimeout(myModal.data('hideInterval')); 
     myModal.data('hideInterval', setTimeout(function(){ 
      myModal.modal('hide'); 
     }, 7000)); 

var sec = 7; 

function pad(val) { 
    return val > 2 ? val : "0" + val; 
} 
var timer = setInterval(function() { 
    document.getElementById("seconds").innerHTML = pad(--sec % 60); 
    document.getElementById("minutes").innerHTML = pad(parseInt(sec/60, 10)); 
}, 1000); 

setTimeout(function() { 
    clearInterval(timer); 
    sec = 7; 
}, 7000); 




    }); 
}); 

問題は、 "秒"を7（カウントダウン効果のために）に再初期化するのを忘れることです！