Close Bootstrap Modal After a Period of Time

Question

I have a gif image which spins in circle. I put that in the bootstrap modal. It is my progress bar. I would like the modal to appear for about 5 seconds and then it will close itself. Here's my code:

<?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>

It sort of work. As in, it sleeps for 5 seconds then it loads the whole page. Not what I want at all. A user would click on a button to startup the modal, no problem there. Once it is active, it need to sleep for 5 sec, and then it close itself. As in, it closes the current or active modal.

How would I go about doing this?

Answer 1

You can use the following script to close a Bootstrap Modal after 5000 ms:

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

Answer 2

PHP as you have coded will not work.

Try use Javascript click() fuction for a button and the sleep() function you have used:

$(document).ready(function(){
        $('button#ajaxSubmit').click(function(e){
            setTimeout($total);
            $('#progressBarCenter').modal('toggle');
       });
});

The first line of this JS will wait for the entire page to load before let the code to run. The second line will run sleep() after the user click the form button, and after that, toggle the modal.

And add a id to your <button> , like the one below:

<button type="button" class="close" aria-label="Close" id="ajaxSubmit">

Answer 3

I did a debugger in IE and realize that you can't use a sleep function in javascript cause it doesn't exist. You need to use the setTimeout() function instead. Thank you @Chukwuemeka Inya