I have a modal dialog (#busyIndicator'), which basically says Please Wait. Sometime the operation pletes way too fast so the dialog is essentially an epilepsy inducing blur between $("#busyIndicator").modal('show'); and $('#busyIndicator').modal('hide');.

Is there a nice way to hide the modal that introduces delay in the way it fades out? I tried $('#busyIndicator').fadeOut(2000).modal('hide');, but it doesn't seem to work.

I have a modal dialog (#busyIndicator'), which basically says Please Wait. Sometime the operation pletes way too fast so the dialog is essentially an epilepsy inducing blur between $("#busyIndicator").modal('show'); and $('#busyIndicator').modal('hide');.

Is there a nice way to hide the modal that introduces delay in the way it fades out? I tried $('#busyIndicator').fadeOut(2000).modal('hide');, but it doesn't seem to work.

• javascript
• jquery
• html
• css
• twitter-bootstrap

• You could try adding bootstrap's fade class to the modal? – Malk Commented Mar 2, 2017 at 0:57
• @Malk It's in there. <div id="busyIndicator" class="modal fade"> – AngryHacker Commented Mar 2, 2017 at 0:59

4 Answers 4

Input desired closing duration and modal selector.

var timer,
    closingTime = 3000,
    modal = $('#myModal');

modal
    .on('hide.bs.modal', function (e) {
        if (timer) {
            timer = false;
        } else {
            e.preventDefault();
            timer = true;
            modal.animate({
                opacity: 0
            }, closingTime - 150, function () {
                modal.modal("hide");
            })
        }
    })
    .on('hidden.bs.modal', function () {
        modal.css({
            opacity: 1
        })
    })

.center-me {
   min-height: 50vh;
   display: flex;
   align-items: center;
   justify-content: center;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js"></script>


<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<div class="center-me">
  <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Open modal
  </button>
</div>

Typically you would run your JS as a callback of $.fadeOut(), so that the JS in the callback waits for $.fadeOut() to finish first.

$('#busyIndicator').fadeOut(2000,function() {
  $(this).modal('hide');
});

Use setTimeout method. This is the simplest and efficient way i found.

setTimeout(function() {
  $(your_modal).modal('hide');
}, 4000);

Bootstrap modals fade by default, they have transitions setup in their css. However if you want to change the fade speed, use this;

.fade {
    opacity: 0;
    -webkit-transition: opacity 1s linear;
    transition: opacity 1s linear;
}

It should make fading way too slow, but then you can adjust the speed, by increasing the transition time from 1s to something smaller, like 30s.