Bootstrap 3 modal background is missing

Question

The Bootstrap 3 modal normally makes the page darker to highlight the modal itself, and to signify that the page UI is disabled while the modal is showing.

At some point during my coding (a few weeks ago), the background stopped showing up. Everything else works fine, including closing the modal by clicking off it or clicking the X in the top-right corner. The page UI is also disabled until the modal is closed, which is fine. Since it's thousands of lines of code, I won't paste them here.

I can't figure out why my modal background is missing. I have validated my HTML to make sure there are no missing tags. I am also using datatables, tabdrop and d3 on my page but have tried removing these (JS and CSS) one by one to resolve the issue to no avail. What else should I check?

Here is the page: http://suite.swiftdigital.com.au/scripts/marcus/modal/event.htm

Click on the green "New Participant" button to see one of the modals. Another is the Edit View button in the middle of the screen.

Answer 1

It wasn't a CSS or HTML issue after all. Getting the latest Bootstrap JS file fixed it. I was on 3.2.0 and upgraded to 3.3.1. Huh. (You need to make sure the versions of the Bootstrap JS and CSS match.)

Answer 2

Add this to your css:

.modal-backdrop, .modal-backdrop.fade.in {
opacity: 0.7;
filter: alpha(opacity=70);
background: #fff;
}

if you are just using stock bootstrap CSS. this will make the backgroun white with an opacity of 70%.

or

Add this to your css:

    .fade.in {
opacity: .75;
background-color: #000;
}

This is because right now, your .fade.in class is has no background color attached.