Twitter Bootstrap - why is my modal as faded as the background?
Check this issue on the Bootstrap git repository.
Then try putting the modal before the navbar, like this fiddle.
<div id="registration_modal" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Register An Account</h3>
</div>
<div class="modal-body">
Registration form goes here.
</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button class="btn btn-primary">Register</button>
</div>
</div>
<div class="navbar navbar-fixed-top">
<a href="#registration_modal" data-toggle="modal">
Register
</a>
</div>
Unfortunately the answer here didn't help me.. but fortunately this discussion has the same issue and they have a helpful answer that worked for me. Basically, you have to make sure the modal is not inheriting any weird positioning elements from parent divs:
Bootstrap modal appearing under background