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?
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?
Share Improve this question edited May 8, 2020 at 17:18 informatik01 16.4k11 gold badges78 silver badges108 bronze badges asked Oct 25, 2016 at 9:52 twantwan 2,65912 gold badges42 silver badges115 bronze badges 5- 1 show some more code so that we can start from – Bhavin Shah Commented Oct 25, 2016 at 10:02
- @BhavinShah I got exactly the same code as on w3schools. And included bootstrap.min.js – twan Commented Oct 25, 2016 at 11:05
-
okay.. so did you include
modal-backdrop fade inCSS? – Bhavin Shah Commented Oct 25, 2016 at 11:49 - Yeah I did..... – twan Commented Oct 25, 2016 at 12:22
- Any console errors? – Luuk Skeur Commented Oct 25, 2016 at 15:03
3 Answers
Reset to default 11This 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.
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.
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./javascript/#modals-examples