一段时间后关闭Bootstrap模式

Question

我有一个旋转的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">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <img src="webapps/images/progressBar.gif">
      </div>
    </div>
  </div>
</div>

有点工作。 在这种情况下，它会休眠5秒钟，然后加载整个页面。 根本不是我想要的。 用户可以单击一个按钮来启动模态，那里没有问题。 一旦激活，它需要睡眠5秒钟，然后关闭自身。 与之类似，它关闭当前或活动模式。

我将如何去做呢？

Answer 1

您可以使用以下脚本在5000毫秒后关闭Bootstrap Modal：

<script>
    $(document).ready(function () {
        $("#buttonID").click(function(){
            setTimeout(function() {
                $('#progressBarCenter').modal('toggle');
            }, 5000);
        });
    });
</script>

Answer 2

您编码的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">

Answer 3

我在IE中做了一个调试器，意识到您不能在javascript中使用sleep函数，因为它不存在。 您需要改用setTimeout（）函数。 谢谢@Chukwuemeka Inya