Bootstrap Modal popping up but has a “tinted” page and can't interact

Question

I am using bootstrap to set up a modal popup. When a button is clicked, the modal dialog opens, but the entire page is slightly \"tinted\", and I can\'t interact with the m

Answer 1

I ran into this as well and found this exact phenomenon occurs with the screen freezing after clicking the button to open a Modal and found this was due to an unclosed that I accidently deleted.

When I added the closing , the Modal Popup started working again.

Answer 2

I fixed this problem by moving all modal html to the bottom of my file! Nothing else worked. Only the button to open the modal is within the rest of the html. This could have something to do with body tag declarations but I don't have time to worry about it.

Answer 3

Ok, so I figured out the issue.

If the modal container has a fixed position or is within an element with fixed position this behavior will occur.

Easiest way is to just move the modal div so it is outside any elements with special positioning. One good place might be just before the closing body tag .

This is what I did, and it worked.

Answer 4

I found a good fix for this problem here:

https://stackoverflow.com/a/18764086

Add -webkit-transform: translateZ(0) to the position: fixed element. This forces Chrome to use hardware acceleration to continuously paint the fixed element and avoid this bizarre behavior.

Answer 5

Solved it by adding data-backdrop="false" to the main div as:

<div class="modal fade" data-backdrop="false" tabindex="-1" role="dialog">
  ......
</div>

Answer 6

This happened to me, and it took ages to diagnose. If it happens to you, add this to your css:

div.modal div.modal-backdrop {
    z-index: 0;
}

EDIT: You may need more specificity for this setting to be picked up. As Nick Spoon suggests, you can use

body.modal-open div.modal-backdrop { 
    z-index: 0; 
}

And you may need to add more qualifiers, depending on what the rest of your CSS is doing. You can also use !important, but that's just sweeping the problem under the rug.