Bootstrap modal appearing under background

Question

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 u

Answer 1

set the z-index .modal to a highest value

For example, .sidebarwrapper has z-index of 1100, so set the z-index of .modal to 1101

.modal {
    z-index: 1101;
}

Answer 2

An other way to approach this is to remove the z-index from the .modal-backdrop in bootstrap.css. This will cause the backdrop to be on the same level as the rest of your body (it will still fade) and your modal to be on top.

.modal-backdrop looks like this

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #000000;
}

Answer 3

Hi I had the same issue then I realize that when you using bootsrap 3.1 Unlike in older versions of bootsrap (2.3.2) the html structure of the modal was changed!

you must wrap your modal header body and footer with modal-dialog and modal-content

<div class="modal hide fade">

  <div class="modal-dialog">
    <div class="modal-content">

    **here goes the modal header body and footer**

    </div>
  </div>

 </div>

Answer 4

$('.modal').insertAfter($('body'));

Answer 5

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.

Answer 6

I had this issue and the easiest way to fix it was addind z-index greater than 1040 on the modal-dialog div:

<div class="modal-dialog" style="z-index: 1100;">

I believe bootstrap create a div modal-backdrop fade in which in my case has the z-index 1040, so if You put the modal-dialog on top of this, it should not be grey out anymore.