[英]Close Bootstrap Modal After a Period of Time
我有一個旋轉的gif圖像。 我把它放在引導模態中。 這是我的進度欄。 我希望該模式出現約5秒鍾,然后它會自行關閉。 這是我的代碼:
<?php
function progressBar($total){
sleep($total);
return "modal";
}
?>
<!-- Modal ProgressBar -->
<div class="modal fade" id="progressBarCenter" tabindex="-1" role="dialog" aria-labelledby="progressBarCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="progressBarLongTitle">Your Script Is Executing...</h5>
<button type="button" class="close" data-dismiss=<?php progressBar(5); ?> aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<img src="webapps/images/progressBar.gif">
</div>
</div>
</div>
</div>
有點工作。 在這種情況下,它會休眠5秒鍾,然后加載整個頁面。 根本不是我想要的。 用戶可以單擊一個按鈕來啟動模態,那里沒有問題。 一旦激活,它需要睡眠5秒鍾,然后關閉自身。 與之類似,它關閉當前或活動模式。
我將如何去做呢?
您可以使用以下腳本在5000毫秒后關閉Bootstrap Modal:
<script>
$(document).ready(function () {
$("#buttonID").click(function(){
setTimeout(function() {
$('#progressBarCenter').modal('toggle');
}, 5000);
});
});
</script>
您編碼的PHP無法正常工作。
嘗試對按鈕和使用過的sleep()函數使用JavaScript click()功能:
$(document).ready(function(){
$('button#ajaxSubmit').click(function(e){
setTimeout($total);
$('#progressBarCenter').modal('toggle');
});
});
該JS的第一行將等待整個頁面加載,然后再運行代碼。 用戶單擊表單按鈕后,第二行將運行sleep(),然后切換模式。
並向您的<button>
添加一個id
,如下所示:
<button type="button" class="close" aria-label="Close" id="ajaxSubmit">
我在IE中做了一個調試器,意識到您不能在javascript中使用sleep函數,因為它不存在。 您需要改用setTimeout()函數。 謝謝@Chukwuemeka Inya
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.