Bootstrap Modal将打开，但停留在灰色背景中，无法关闭或与Modal交互

Question

我正在使用Bootstrap的Modal类，以在单击按钮后出现模态。代码有效-单击按钮并出现模态，但是，整个屏幕显示为灰色，无法单击模态。我无法关闭模式，因为它“处于”灰色背景。您可以在下图中看到：

这是代码：

    <!-- 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>

我尝试调整模式的z-index，将模式div移到html表单的主体外部，顶部和底部，但这些都不起作用。

我感谢有关如何解决此问题的任何想法。

Answer 1

我回过头将模式div移到了body标签之外，现在可以使用了。

</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>

Answer 2

你可能修复了它，但可能有人不能。这个问题的解决方法是；

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