My manners are opening under the black background, like this:
If I take the z-index: 1040 from the code below, the black background looks like:
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
background-color: #000;
}
I would however like it to open normally, with the black background below the modal.
Translation of the main answer this question from SOen:
This behavior occurs when the modal has a fixed or relative position, or is within a fixed or relative position.
Verify that the modal and all its parent elements are positioned in the default way to solve the problem.
Here are some ways to do this:
The easiest way is to simply move the% modal_component out of any specially positioned elements. A good place might be just before the closing tag div .
Alternatively, you can remove </body> : modal CSS properties and inherited (I was in doubt here in the translation ...), until the problem disappears . However, this can change the appearance of the page.
update
And you have a other answer below, which might help, from what you described in the question:
...
What worked: Set positions from z-index to .modal-backdrop .
.modal-backdrop {
z-index: -1;
}
I was with the same problem but I discovered what it is, in this case has some div or ul or li or some other element that is with position:absolute; in that is making this background overlap, so you have to create a new rule with position:static; to be able to release the position as all static.
Example:
<style>
.dropdown-menu {
position:static !important; //aki faz funcionar o madal e so por estatic
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
Put in your css navbar navbar-fixed-top need to have z-index > 1040
If it does not work, try leaving your navbar below the popup, just like this example. link
See if it works.