カウントダウンタイマーにモーダルウィンドウのブートストラップを表示させる

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

ちょうどあなたのsetIntervalコールがOKでなかった

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

あなたの目的のために

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

を使用しています。

ブートストラップCSSとJSとjQueryが正しくロードされていることを確認してください。