javascriptcsstwitter-bootstrapmodal-dialog

Bootstrap modal appearing under background

I have used the code for my modal straight from the Bootstrap example, and have included only the bootstrap.js (and not bootstrap-modal.js). However, my modal is appearing underneath the grey fade (backdrop) and is non editable.

Here's what it looks like:

modal hiding behind backdrop

See this fiddle for one way to reproduce this problem. The basic structure of that code is like this:

<body>
    <p>Lorem ipsum dolor sit amet.</p>    

    <div class="my-module">
        This container contains the modal code.
        <div class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">Modal</div>
                </div>
            </div>
        </div>
    </div>
</body>

body {
    padding-top: 50px;
}

.my-module {
    position: fixed;
    top: 0;
    left: 0;
}

Any ideas why this is or what I can do to fix this?

Solution

  • If the modal container has a fixed or relative position or is within an element with fixed or relative position this behavior will occur.

    Make sure the modal container and all of its parent elements are positioned the default way to fix the problem.

    Here are a couple ways to do this:

    1. Easiest way is to just move the modal div so it is outside any elements with special positioning. One good place might be just before the closing body tag </body>.
    2. Alternatively, you can remove position: CSS properties from the modal and its ancestors until the problem goes away. This might change how the page looks and functions, however.