Twitter Bootstrap - why is my modal as faded as the background?

Question

So I'm using Twitter Bootstrap and I have a modal that slides down when the user clicks the "Register" button.

The only problem is that the not only does the background page fade, which is a nice effect, but the modal is also faded. How can I get it so that the modal is normal brightness while the background is faded?

I created a JSFiddle to demonstrate my problem here: http://jsfiddle.net/jononomo/7z8RZ/7/

The following code creates a faded modal:

<div class="navbar navbar-fixed-top"> 
    <a href="#registration_modal" data-toggle="modal">
        Register
    </a>
    <div id="registration_modal" class="modal hide fade">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">×</button>
                <h3 id="myModalLabel">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>

Note: if I remove the outer div, then everything works fine. So the problem is that the code for the modal is within the following lines:

<div class="navbar navbar-fixed-top">
</div>

Of course I don't want to remove that div, since I want the button the link that launches the modal to be in the navbar that is fixed to the top of the screen.

Edit: I have narrowed it down to the fact that the outer div is of the class navbar-fixed-top. When I remove that tag, everything works as expected -- you can see it working correctly here: http://jsfiddle.net/jononomo/7z8RZ/8/ Of course, I would like the navbar to be fixed to the top, so this doesn't solve my problem.

Maxwellmaxy

My JSFiddle example wasn't working before I edited, so I got downvoted. – Maxwellmaxy

@JonCrowell Look at this update to your fiddle: jsfiddle.net/7z8RZ/10 – Jerkin

Answer 1

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>

​

Idden

That is totally not possible in my case. How could this be done without doing this? – Pandemonium

The modal can also appear after the navbar. The key thing to realize is that the link to the modal can nest under the navbar, but the nodal is not a child of the navbar. – Caeoma

Answer 2

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

Hetaera

Answer 3

I had the same issue. The solution for me, was to place the modal div just before the closing body tag.

Gap

Answer 4

This works for me.

$(document).ready(function () {
        // To fix issue of falling behind backdrop
        $('#paymentModal').prependTo('body');

 });

Nosey

Answer 5

The way that I solved it was by wrapping everything within the modal inside a <div class="modal-content"> tag. It looked something like this:

<div class="modal fade" id="TestModal">
    <div class="modal-content">
        <div class="modal-header">
            Modal header here
        </div>
        <div class="modal-body">
            <p>Modal content here</p>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>

Without the modal-content div, the modal ended up being just as gray as the the background.

Godless

@wavemode I did a bit more research on this and apparently, the modal feature has some notable issues depending on what combination of JQuery and Bootstrap is being used. I'm using JQuery 1.10.2 and Bootstrap 3.3.2 and it works fine. – Godless