Faire un compte à rebours afficher une fenêtre modale bootstrap

Question

J'ai un autre problème. Cette fois je veux faire que quand un compte à rebours atteint 0, il déclenche ou affiche une fenêtre modale pour apparaître.

J'ai les deux codes pour le compte à rebours modal et le compte à rebours, mais je ne sais pas exactement comment le faire pour le modal.

J'ai essayé plusieurs suggestions que j'ai lues, mais aucune ne fonctionne ou il suffit de visser le code.

Merci beaucoup à l'avance.

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

Il suffit d'utiliser

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

Pour votre but

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

Votre appel setInterval n'a pas été correct.

Assurez-vous que votre bootstrap CSS et JS et jQuery sont correctement chargés.