Bootstrap - Modal在隐藏时保持“display：block”

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

Answer 2

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 recommended 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.