Modal backdrop not shown using Bootstrap modal

Question

I am using the modal plugin from Bootstrap and for some reason the backdrop is not showing.

When I check same code on W3Schools I notice a div is generated every time a modal opens:

<div class="modal-backdrop fade in"></div>

I got the exact same code as on W3Schools but this div is not generated on my site.

How can I fix that?

Answer 1

This happened to me when I used the wrong method to open the modal. I had

$('#myModal').show()

when of course it should be

$('#myModal').modal('show')

Another symptom of using the wrong method, in addition to the semi-opaque backdrop not showing, was the close button in the modal also did not work.

Answer 2

Please check whether CSS properties are overridden or not by inspecting <div class="modal-backdrop fade in"></div> element. Mostly this could be a CSS issue caused by an override.

Answer 3

Cannot reproduce this, as the w3 school examples work fine.

Verify the following. This might cause the issue:

• It's good practice to put the <div class="modal">.. at the end of the file or before </body>
• If any other css class is overriding the modal-backdrop class
• if jquery and bootstrap JS are added properly

Get the modal from http://getbootstrap.com/javascript/#modals-examples