Bootstrap - Modal keeps "display: block" when hidden

Question

I have a bootstrap modal in my web app that keeps being displayed even when I launch myModal.modal('close');. I am pretty stuck with that strange problem.

Approx. one in ten times, I have that display: block; staying after close. The modal is correctly hidden because I can't see it anymore but it is overlaying my entire page and I cannot click on anything.

I tried to handle the close with :

$('#myModal').on('hidden.bs.modal', function () {
  $(this).css('display', 'none !important');
})

And this does not work, the modal div is still having style="display: block;"

Answer 1

Try these and let me know if they work.

$('selector').css('z-index', '-999');
$('selector').css('margin-left', '-50000');
$('selector').css('margin-top', '-50000');