引导模式将打开,但保持在灰色背景中,并且无法关闭或与模式交互 [英] Bootstrap Modal opens but stays in gray background and cannot close or interact with modal
本文介绍了引导模式将打开,但保持在灰色背景中,并且无法关闭或与模式交互的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用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">×</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索引,我已将模式div移到正文之外、HTML表单的顶部和底部,但都不起作用。
我非常感谢任何有关如何解决此问题的想法。
推荐答案
我返回并将模式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">×</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>
这篇关于引导模式将打开,但保持在灰色背景中,并且无法关闭或与模式交互的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文