Bootstrap modal appearing under background

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.

The problem has to do with the positioning of the parent containers. You can easily "move" your modal out from these containers before displaying it. Here's how to do it if you were showing your modal using js:

$('#myModal').appendTo("body").modal('show');

Or, if you launch modal using buttons, drop the .modal('show'); and just do:

$('#myModal').appendTo("body") 

This will keep all normal functionality, allowing you to show the modal using a button.

I tried all options supplied above but didn't get it to work using those.

What did work: setting the z-index of the .modal-backdrop to -1.

.modal-backdrop {
  z-index: -1;
}

Also, make sure that version of BootStrap css and js are the same ones. Different versions can also make modal appearing under background:

For example:

Bad:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

Good:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>