Search code examples
csstwitter-bootstrapmodal-dialogz-index

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?

Solution

  • 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.

    <body>
    <!-- All other HTML -->
    <div>
        ...
    </div>

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

    Demo

    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.