Bootstrap Modal opens but stays in gray background and cannot close or interact with 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">&times;</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.

Oz

Can you show the code for the masking? – Pentecostal

What code would that be -- "masking"? – Oz

Answer 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">&times;</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>

Oz

Not 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. – Disaccharide

Answer 2

You probably fixed it, but there may somebody who can't. The solution to this problem is;

$("#myModal").prependTo("body");

Progesterone

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;
}

Milliken

Thank you so much. This helped me in vue Laravel spa – Shizue

Good to know it – Milliken

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>

Sheldon

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

Spencer

Answer 6

With bootstrap 5.1 in Electron, I solve this problem by modifying the z-index in css as below

.modal-backdrop.fade.show { z-index: inherit; }

Dialyse

Answer 7

find your gray modal by inspect element, then remove it by this code

$('.modal-backdrop').hide();

this is my gray rectangle scope class name

Viewless