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调用没问题。

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

使倒数计时器显示模态窗口引导程序

1 个答案: