1
こんにちは私はうまく動作しているカウントダウンタイマーを作成しましたが、10秒間残りますと1つのポップアップが残っていて、 。カウントダウンタイマーで複数回表示するようにポップアップを停止する方法
私はこの問題は、私がポップアップを閉じるしようとすると、それが再び表示されていることである。このポップアップに
を表示するには、ブートストラップモーダルを使用しています。この問題に関する解決策を教えてください。
ここはマイコードです。これはローカルホスト上で実行できます。
<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>
だけでなく、あなたは、 '（ "＃私の峰"）を置く。タイマーによって呼び出される' checkTime（） '関数内でモーダル（ "ショー"）'。それをそこから取り除く！ –
あなたは私にモーダルを開くべき場所を教えてもらえますか？それではこれがうまくいかないから –