Missing Bootstrap 3 Boot Module

Question

The Bootstrap 3 modifier usually makes the page darker to highlight the modal itself, and also means that the user interface of the page is disabled during the display of the modality.

At some point during my coding (a few weeks ago) the background stopped displaying. Everything else works fine, including closing the modal file by clicking on it or by clicking on the X in the upper right corner. The user interface of the page is also disabled until the modality is closed, which is great. Since these are thousands of lines of code, I will not embed them here.

I cannot understand why my modal background is missing. I checked my HTML to make sure there are no tags. I also use datatables, tabdrop and d3 on my page, but tried to remove them (JS and CSS) one by one to solve the problem to no avail. What else should I check?

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

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

Answer 1

After all, this was not a CSS or HTML issue. Getting the latest Bootstrap JS file fixed it. I was on 3.2.0 and upgraded to 3.3.1. Yes. (You need to make sure that the Bootstrap JS and CSS versions are consistent.)

Answer 2

Add this to your css:

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

if you just use CSS stop-bootstrap. this will make the runner white with an opacity of 70%.

or

Add this to your css:

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

This is because your .fade.in class does not have a background color right now.

Answer 3

Comparing your code with the Bootstrap OOTB website, your code looks like this:

 <div class="modal-dialog" style="width: 600px"> <div class="modal-content"> <div class="modal-header">... rest of the module 

Bootstrap has this code:

 <div id="myModal" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" style="display: block; padding-right: 17px;"> <div class="modal-backdrop fade in" style="height: 995px;"></div> <div class="modal-dialog"> <div class="modal-content"> 

It looks like you are missing this line below. Try adding it under modal-dialog DIV

 <div class="modal-backdrop fade in" style="height: 995px;"></div>