bootstrap: 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!

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 1
Comments: 15 (6 by maintainers)

Most upvoted comments

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

anand7719 on Mar 23, 2021

This behavior is too strange and unexpected.

codeachange on Oct 27, 2019

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')

Johann-S on Dec 15, 2017