Bootstrap Modal opens but stays in gray background and cannot close or interact with modal - bootstrap-modal

Question

I am using Bootstrap's Modal class to have a modal appear after clicking a button. The code works - the button is clicked and the modal appears, however, the whole screen is grayed-out and the modal cannot be clicked. I cannot close the modal since it is "in" the gray background. You can see in the image below:
Here is the code:
<!-- Modal -->
<div id="myModal" class="modal fade" style="z-index: 9999;" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<section id="profileMain">
<form class="formoid-solid-dark"
style="background-color: #FFFFFF; font-size: 14px; font-family: 'Trebuchet MS','Roboto', Arial, Helvetica, sans-serif; color: #34495E; max-width: 800px; min-width: 150px"
method="post" action="">
<div class="title">
<h2>Intake Request</h2>
</div>
<div id="mainFormTabs" class="container">
<ul class="nav nav-pills">
<li><a data-toggle="tab" href="#tabCM">Comments</a></li>
</ul>
<div class="container" style="border:1px solid #34495E; border-radius: 0px 4px 4px 4px;">
<div class="tab-content clearfix" style="padding: 10px;">
<div id="tabCM" class="tab-pane fade">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
</div>
</div>
</div>
</div>
</form>
</section>
I have tried adjusting the z-index for the modal, I have moved the modal div outside the body, at the top, and at the bottom of the html form, but none of these worked.
I appreciate any ideas on how to fix this.

Answer 1

You probably fixed it, but there may somebody who can't. The solution to this problem is;
$("#myModal").prependTo("body");

Answer 2

I went back and moved the modal div outside the body tag and it is now working.
</body>
<!-- Modal -->
<div id="myModal" class="modal fade" style="z-index: 9999;" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</html>

Answer 3

I guess than you ready solve, but, just for documentation purpose, you can add this to the css and will help
.modal-backdrop {
display: none;
z-index: 1040 !important;
}
.modal-content {
margin: 2px auto;
z-index: 1100 !important;
}

Answer 4

If you cant place modal section outside body, you can try use this:
<script>
$(document).ready(function () {
$("#modalBtnClick").on("click", function () {
$('#myModal').modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
});
});
</script>
and don't forget add id attribute to your button:
<button id="modalBtnClick" type="button" class="btn btn-default" data-dismiss="modal">Close</button>

Answer 5

I had this problem and fixed by giving modal z-index css property :
style="z-index: 999999999;"
as previous solutions didn't work for me