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:
- 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>. - 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.
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:
- 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>. - 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.
Bootstrap Modal sitting behind backdrop
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>
Demo
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.
Opening modal from within a modal, backdrop z-index
Overriding default Bootstrap's css for more than one modals will fix your problem.
Method #01:
Following css will work in case you have only 2 modals.
.modal-backdrop + .modal-backdrop {
z-index: 1040;
}
.modal + .modal {
z-index: 1050;
}
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body { margin: 10px;}
.modal + .modal { z-index: 1060;}
.modal-backdrop + .modal-backdrop { z-index: 1050;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch first modal</button>
<div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div><div class="alert alert-success" role="alert">...</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title">first</h4> </div> <div class="modal-body"> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2"> Launch second modal</button><p>Something</p><p>Something</p><p>Something</p><p>Something</p><p>Something</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --></div><!-- /.modal -->
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title">second</h4> </div> <div class="modal-body"> <p>One fine body…</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --></div><!-- /.modal -->Related Topics
Getcurrentposition() and Watchposition() Are Deprecated on Insecure Origins
Input Value Is a String Instead of a Number
Ternary Operator in Angularjs Templates
JavaScript Data Grid For Millions of Rows
Programmatically Trigger "Select File" Dialog Box
Dynamically Loading CSS Stylesheet Doesn't Work on Ie
Positioning ≪Div≫ Element At Center of Screen
Why the Onclick Element Will Trigger Twice For Label Element
How to Make a Div Stick to the Top of the Screen Once It's Been Scrolled To
How to Transform Black into Any Given Color Using Only CSS Filters
Prevent Onmouseout When Hovering Child Element of the Parent Absolute Div Without Jquery
How to Add Multiple Classes to a Reactjs Component
JavaScript: Find Div'S Line-Height, Not CSS Property But Actual Line-Height
Using Ruby Variable in JavaScript (In App View)
Var Functionname = Function() {} VS Function Functionname() {}
How to Deal With Floating Point Number Precision in JavaScript