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