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.
Answer from Schmalzy on Stack OverflowModal 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.
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.
In my case, I could fix it by adding css for the .modal-backdrop
.modal-backdrop {
z-index: -1;
}
Although this works, form controls still seem to appear above the backdrop, clicking anywhere dismisses the modal, but it doesn't look great.
A better workaround for me is to bind to the shown event (once the page is loaded) and to correct the z-index property.
$('.modal').on('shown.bs.modal', function() {
$(this).css("z-index", parseInt($('.modal-backdrop').css('z-index')) + 1);
});
In this case, if you are OK with changing the DOM on modal shown:
$('.modal').on('shown.bs.modal', function() {
//Make sure the modal and backdrop are siblings (changes the DOM)
$(this).before($('.modal-backdrop'));
//Make sure the z-index is higher than the backdrop
$(this).css("z-index", parseInt($('.modal-backdrop').css('z-index')) + 1);
});
Just append a div with that class to body, then remove it when you're done:
// Show the backdrop
$('<div class="modal-backdrop"></div>').appendTo(document.body);
// Remove it (later)
$(".modal-backdrop").remove();
Live Example:
$("input").click(function() {
var bd = $('<div class="modal-backdrop"></div>');
bd.appendTo(document.body);
setTimeout(function() {
bd.remove();
}, 2000);
});<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<p>Click the button to get the backdrop for two seconds.</p>
<input type="button" value="Click Me">$("input").click(function() {
var bd = $('<div class="modal-backdrop"></div>');
bd.appendTo(document.body);
setTimeout(function() {
bd.remove();
}, 2000);
});<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<p>Click the button to get the backdrop for two seconds.</p>
<input type="button" value="Click Me">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.
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.
If after modal hide, faded background is remained and does not let you click any where you can forcefully remove those by using below piece of code.
First hide (all) your modal div elements.
$('.modal').modal('hide');
Secondly remove 'modal-open' class from body and '.modal-backdrop' at the end of the page.
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
Just in case anybody else runs into a similar issue: I found taking the class "fade" off of the modal will prevent this backdrop from sticking to the screen even after the modal is hidden. It appears to be a bug in the bootstrap.js for modals.
Another (while keeping the fade effects) would be to replace the call to jQueryElement.modal with your own custom javascript that adds the "in" class, sets display: block, and add a backdrop when showing, then to perform the opposite operations when you want to hide the modal.
Simply removing fade was sufficient for my project.
For me the easiest solution was to put my modal in a wrapper with absolute position and z-index higher than .modal-backdrop. Since modal-backdrop (at least in my case) has z-index 1050:
.my-modal-wrapper {
position: absolute;
z-index: 1060;
}<div class="my-modal-wrapper"></div>I went through my HTML and discovered I had an unclosed <div> tag. Closing the <div> resolved the issue for me.
PS: The <div> tag was neither an ancestor nor a child of the modal.
