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;"

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;"

• javascript
• jquery
• css
• twitter-bootstrap
• bootstrap-modal

• can you create a demo – G.L.P Commented May 6, 2015 at 12:00
• 1 important does not work with jQuery .css() – Shaunak D Commented May 6, 2015 at 12:01
• 1 you should try to reproduce your issue so we can see it, because, as you said, it is pretty strange – Yerko Palma Commented May 6, 2015 at 12:01
• 1 You might be able to set the z-index way back if its got the right position. Or try like margin-left or margin-top - 500000 px – Tech Savant Commented May 6, 2015 at 12:04
• Is myModal.modal('hide'); not working? – Zee Commented May 6, 2015 at 12:10

2 Answers 2

Try these and let me know if they work.

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

My first question is: do you have a custom style sheet where you might be overriding the style for #myModal? If so, work to resolve that.

My second question is: what version of Bootstrap are you using? I have seen a bug logged similar to this back in 2012. If possible, upgrade to the latest version of Bootstrap (3.3.4).

My third question is: what are you clicking to do the close? Is it the close button ( type="button" class="close" ) or is it a button with a data-dismiss="modal" attribute?

If the close button, you could try this as long as you don't have other modals on the page:

$(".close").on( "click", function() {
    $("#myModal").hide();
});

This might be worth a shot, too (though, not the remended approach):

$("#myModal").on("hide",function(){
    $("#myModal").css("display", "none");
});

Ultimately, I agree with needing a demo as Amit and Yerko suggest as this seems odd. I have never run across something like this, and I have used bootstrap for a long while.