讓倒數計時器顯示一個模態窗口引導程序

Question

我有另一個問題。這次我想讓倒數計時器達到0時觸發或顯示一個模式窗口。

我有模式和倒數計時器的代碼，但我不知道如何完全使它，所以它要求的模態。

我已經嘗試了幾個我讀過的建議，但沒有任何作品或它只是螺絲代碼。

非常感謝提前。

var seconds = 300; //**change 120 for any number you want, it's the seconds **// 
 
function secondPassed() { 
 
    var minutes = Math.round((seconds - 30)/60); 
 
    var remainingSeconds = seconds % 60; 
 
    if (remainingSeconds < 10) { 
 
     remainingSeconds = "0" + remainingSeconds; 
 
    } 
 
    document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds; 
 
    if (seconds == 0) { 
 
     clearInterval(countdownTimer); 
 
     document.getElementById('countdown').innerHTML = "Last chance!"; 
 
    } else { 
 
     seconds--; 
 
    } 
 
} 
 
    
 
var countdownTimer = setInterval('secondPassed()', 1000);

<!-- Modal start--> 
 
<div class="modal fade" id="ventanamdl" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
 
     <div class="modal-dialog modal-lg"> 
 
      <div class="modal-content"> <!-- to create more modals copy-paste from the div class "modal fade" until here, you can customize moda-content with css--> 
 
      <div class="modal-header"> 
 
       <h1>This is your last chance!</h1> 
 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
 
      </div> 
 
      <div class="modal-body"> 
 
         
 
      <p>Your spot can't be reserved any longer! Click the button to join now! 
 
      <br> 
 
      <button id="btnjoin" type="submit" onclick="location.href='http://google.com';">Join!</button> 
 
      </p> 
 
       
 
      </div> 
 
      <div class="modal-footer"> 
 
      This is your last chance! 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
<!-- Modal end--> 
 
    
 

 
<div id="bottomdiv"> 
 
    <p class="mytext2">Over 87 people have claimed their spot. Get yours before time runs out! <span id="countdown" class="timer"></span></p> 
 
</div>

Answer 1

只需使用

$('#ventanamdl').modal('show'); 

你的目的

var seconds = 300; //**change 120 for any number you want, it's the seconds **// 
function secondPassed() { 
    var minutes = Math.round((seconds - 30)/60); 
    var remainingSeconds = seconds % 60; 
    if (remainingSeconds < 10) { 
     remainingSeconds = "0" + remainingSeconds; 
    } 
    document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds; 
    if (seconds == 0) { 
     clearInterval(countdownTimer); 
     document.getElementById('countdown').innerHTML = "Last chance!"; 
     $('#ventanamdl').modal('show'); 
    } else { 
     seconds--; 
    } 
} 

//now your setInterval call is ok 
var countdownTimer = setInterval(secondPassed, 1000); 

你的setInterval電話是不正常。

確保您的引導CSS和JS和jQuery已正確加載。