使倒数计时器显示模态 window bootstrap

Question

我还有一个问题。这次我想在倒数计时器达到 0 时触发或显示模态 window 以显示。

我有模态和倒数计时器的代码，但我不知道具体是怎么做的，所以它需要模态。

我已经尝试了一些我读过的建议，但 none 有效，或者只是搞砸了代码。

非常感谢。

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 调用不正确。

确保您的 bootstrap CSS 和 JS 以及 jQuery 已正确加载。

使倒数计时器显示模态 window bootstrap

Make a countdown timer display a modal window bootstrap

javascript

jquery

timer

modal-dialog

countdown