Bootstrap Modal opens but stays in gray background and cannot close or interact with modal
Solution 1
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>
Solution 2
You probably fixed it, but there may somebody who can't. The solution to this problem is;
$("#myModal").prependTo("body");
Solution 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;
}
Solution 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>
![Dan](https://i.stack.imgur.com/EcPkY.png?s=256&g=1)
Dan
Updated on July 31, 2022Comments
-
Dan almost 2 years
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.
-
Murphpdx over 7 yearsCan you show the code for the masking?
-
Dan over 7 yearsWhat code would that be -- "masking"?
-
-
Kerim Yagmurcu over 5 yearsNot working in Bootstrap 4.1.xx... and I still have no Idea how to fix this issue... even I don't know why it is happening.
-
Jesil Jose almost 3 yearsThank you so much. This helped me in vue Laravel spa
-
sGermosen almost 3 yearsGood to know it