Modal doesn't hide when shortly a show

When hiding a modal too soon after showing, it won’t hide.

Reproducable: $("#some-modal").modal('show'); $("#some-modal").modal('hide')

The modal is still shown afterwards. This code seems useless, but in general I use modals for loading pop-ups, to indicate that the user has to wait. Sometimes the loading goes fast causing the hide to be called too shortly after the show in order for the hiding to work.

I fixed it in an ugly way doing:

var int = setInterval(function() {
    if ($("#some-modal").is(":visible"))
         $("#some-modal").modal('hide');
    else
        clearInterval(int);
}.bind(this), 100);

Maybe there is a fix in the bootstrap code possible? Thanks in advance!

[anand7719]

My answer to issue was to replace the modal with simple in-line spinner, I think it is less invading.

[Johann-S]

You can simply listen to hide.bs.modal and hidden.bs.modal and you’ll be sure your modal is hidden. If you prevent the show.bs.modal event your modal won’t be visible.

var $myModal = $('#some-modal')
$myModal.on('shown.bs.modal', function () {
  // modal shown
  setTimeout(function () {
      $myModal.modal('hide')
  }, 1000)
})

$myModal.on('hidden.bs.modal', function () {
  // modal hidden
})

$myModal.modal('show')