javascript - Make a countdown timer display a modal window bootstrap -
i have issue. time want make when countdown timer reaches 0 triggers or display modal window show up.
i have both codes modal , countdown timer, dunno how make calls modal.
i've tried several suggestions i've read none works or screws code.
many in advance.
var seconds = 300; //**change 120 number want, it's 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"> <!-- create more modals copy-paste div class "modal fade" until here, can customize moda-content css--> <div class="modal-header"> <h1>this last chance!</h1> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> </div> <div class="modal-body"> <p>your spot can't reserved longer! click button join now! <br> <button id="btnjoin" type="submit" onclick="location.href='http://google.com';">join!</button> </p> </div> <div class="modal-footer"> last chance! </div> </div> </div> </div> <!-- modal end--> <div id="bottomdiv"> <p class="mytext2">over 87 people have claimed spot. yours before time runs out! <span id="countdown" class="timer"></span></p> </div>
just use
$('#ventanamdl').modal('show'); for purpose
var seconds = 300; //**change 120 number want, it's 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 setinterval call ok var countdowntimer = setinterval(secondpassed, 1000); your setinterval call not ok.
make sure bootstrap css , js , jquery loaded.
Comments
Post a Comment