Hi I have created a countdown timer which is working fine but in which I want that when 10 seconds remains one popup is shown which tell user that time is going to finish .
I use bootstrap modal to show this PopUp
The Problem is that when I try to close the popup it shows again. Can you please give any solution regarding this problem.
Here Is My Code It can be run on localhost.
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- <script src="js/jquery.min.js"></script>-->
<script type="text/javascript">
var total_seconds = 15;
var c_minutes=parseInt(total_seconds/60);
var c_seconds=parseInt(total_seconds%60);
// var hours=parseInt(total_seconds/3600);
function CheckTime(){
document.getElementById('time-left').innerHTML='Time Left: '+c_minutes+' min '+c_seconds+' sec';
if(total_seconds<=0){
// alert("oops no time left");
//setTimeout('document.form.submit()',1);
}else{
//alert("start");
total_seconds=total_seconds-1;
c_minutes=parseInt(total_seconds/60);
c_seconds=parseInt(total_seconds%60);
//hours=parseInt(total_seconds/3600);
//alert(total_seconds);
document.getElementById('t_sec').value=total_seconds;
var time_left = $('#t_sec').val();
//alert(time_left);
if(time_left<=10){
//alert("hello "+time_left);
$('#myModal').modal('show');
$('#m_sec').text(time_left);
}
console.log(total_seconds);
setTimeout("CheckTime()",1000);
}
}
setTimeout("CheckTime()",1000);
function save_data(){
var sec=document.getElementById('t_sec').value;
$.ajax({
type:'post',
url: 'save_time.php',
data:{total_sec:sec},
success:function(response){
}
});
alert(sec);
//setTimeout('document.form.submit()',1);
}
</script>
<style>
.button{
color: #fff;
background-color: #3079ed;
border: none;
border-radius: 4px;
text-align: center;
white-space: nowrap;
padding: 6px 12px;
/* border-color: #ccc;*/
}
</style>
</head>
<body>
<h1>Countdown Timer</h1>
<div id="time-left"> </div>
<br/><br/>
<form method="post" name="form">
<input type="hidden" name="tot_sec" id="t_sec" value="">
<button name="sub" id="submt" onclick="save_data()">Save</button>
</form>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog" style="margin-top: 150px;">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<!-- <div class="modal-header">-->
<div style="padding-top: 20px;padding-left: 15px;padding-right: 15px;padding-bottom: 20px;">
<!-- <button type="button" class="close" data-dismiss="modal">×</button>-->
<div style="background: #cbcdce;padding-left: 8px;"><h4 class="modal-title" style="font-size: 18px;font-family: segoe UI;font-weight: bold;">Warning</h4></div>
</div>
<div class="modal-body" style="padding-left: 15px;padding-right: 15px;padding-bottom: 2px;padding-top: 2px;">
<p style="font-family: Segoe UI;font-size: 15px;font-weight: 600;">oops!... Your time to complete survey is going to finish.</p>
<div><span style="font-family: Segoe UI;font-size: 15px;font-weight: normal;"> Your Survey will be submitted within</span> <span id="m_sec" style="color: #e61e1e; font-family: Segoe UI;font-weight: bold;"></span> <span style="font-family: Segoe UI;font-size: 15px;font-weight: normal;">Seconds...</span></div>
</div>
<!-- <div class="modal-footer">-->
<div style="height: 45px;margin-top: 20px;margin-bottom: 20px;padding-right: 15px;padding-left: 15px;">
<div style="float: right;padding-top: 4px;padding-right: 2px;padding-bottom: 4px;"><button type="button" class="button" data-dismiss="modal">OK</button></div>
</div>
</div>
</div>
</div>
<!--End modal-->
</body>
</html>
Use a global variable to store shown status and check it. If it is false, show the modal.
Once the modal is shown, it set to shown=true so that it will never popup again.
Try the code below.
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- <script src="js/jquery.min.js"></script>-->
<script type="text/javascript">
var total_seconds = 15;
var shown=false;
var c_minutes=parseInt(total_seconds/60);
var c_seconds=parseInt(total_seconds%60);
// var hours=parseInt(total_seconds/3600);
function CheckTime(){
document.getElementById('time-left').innerHTML='Time Left: '+c_minutes+' min '+c_seconds+' sec';
if(total_seconds<=0){
// alert("oops no time left");
//setTimeout('document.form.submit()',1);
}else{
//alert("start");
total_seconds=total_seconds-1;
c_minutes=parseInt(total_seconds/60);
c_seconds=parseInt(total_seconds%60);
//hours=parseInt(total_seconds/3600);
//alert(total_seconds);
document.getElementById('t_sec').value=total_seconds;
var time_left = $('#t_sec').val();
//alert(time_left);
if(time_left<=10){
//alert("hello "+time_left);
if (shown==false){
$('#myModal').modal('show');
shown=true;
}
$('#m_sec').text(time_left);
}
console.log(total_seconds);
setTimeout("CheckTime()",1000);
}
}
setTimeout("CheckTime()",1000);
function save_data(){
var sec=document.getElementById('t_sec').value;
$.ajax({
type:'post',
url: 'save_time.php',
data:{total_sec:sec},
success:function(response){
}
});
alert(sec);
//setTimeout('document.form.submit()',1);
}
</script>
<style>
.button{
color: #fff;
background-color: #3079ed;
border: none;
border-radius: 4px;
text-align: center;
white-space: nowrap;
padding: 6px 12px;
/* border-color: #ccc;*/
}
</style>
</head>
<body>
<h1>Countdown Timer</h1>
<div id="time-left"> </div>
<br/><br/>
<form method="post" name="form">
<input type="hidden" name="tot_sec" id="t_sec" value="">
<button name="sub" id="submt" onclick="save_data()">Save</button>
</form>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog" style="margin-top: 150px;">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<!-- <div class="modal-header">-->
<div style="padding-top: 20px;padding-left: 15px;padding-right: 15px;padding-bottom: 20px;">
<!-- <button type="button" class="close" data-dismiss="modal">×</button>-->
<div style="background: #cbcdce;padding-left: 8px;"><h4 class="modal-title" style="font-size: 18px;font-family: segoe UI;font-weight: bold;">Warning</h4></div>
</div>
<div class="modal-body" style="padding-left: 15px;padding-right: 15px;padding-bottom: 2px;padding-top: 2px;">
<p style="font-family: Segoe UI;font-size: 15px;font-weight: 600;">oops!... Your time to complete survey is going to finish.</p>
<div><span style="font-family: Segoe UI;font-size: 15px;font-weight: normal;"> Your Survey will be submitted within</span> <span id="m_sec" style="color: #e61e1e; font-family: Segoe UI;font-weight: bold;"></span> <span style="font-family: Segoe UI;font-size: 15px;font-weight: normal;">Seconds...</span></div>
</div>
<!-- <div class="modal-footer">-->
<div style="height: 45px;margin-top: 20px;margin-bottom: 20px;padding-right: 15px;padding-left: 15px;">
<div style="float: right;padding-top: 4px;padding-right: 2px;padding-bottom: 4px;"><button type="button" class="button" data-dismiss="modal" >OK</button></div>
</div>
</div>
</div>
</div>
<!--End modal-->
</body>
</html>
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments