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

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

您的设置间隔调用不正常。

确保你的引导程序CSS和JS和jQuery已正确加载。