WizzyBoom WizzyBoom - 1 year ago 123
CSS Question

Bootstrap Modal sitting behind backdrop

So I'm having nearly the exact same problem as @Jamescoo was but I think that my issue is coming from the fact that I have already positioned a couple of DIVs to create a sliding nav panel.

Here's my exact setup replicated: http://jsfiddle.net/ZBQ8U/2/

BONUS: Feel free to grab the code for the sliding panel if you'd like :)

The z-indexes shouldn't conflict and their values would show that they are stacking correctly, but visually they are not.

Once you click the 'Open Modal' button the

<div class="modal-backdrop fade in"></div>
covers everything! (you'll have to re-run the code to reset it)

I don't know quite how to remedy this one...Any ideas?

Answer Source

Just move the entire modal outside of the rest of your code, to the very bottom. It doesn't need to be nested in any other element, other than the body.

    <!-- All other HTML -->

    <!-- Modal -->
    <div class="modal fade" id="myModal">


They hint at this solution in the documentation.

Modal markup placement Always
try to place a modal's HTML code in a top-level position in your document to avoid other components affecting the modal's appearance and/or functionality.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download