Bootstrap Modal 后台

Question

我遇到了一个问题，即 Bootstrap 模态小部件出现在模态的灰色后台后面，这使我无法对模态本身进行任何操作，当我点击模态本身时，它仍然消失。

我已经检查了我在这里找到的其他建议的解决方案以及其他站点，包括将其移到任何父容器之外，以便它位于开始正文标记之后，就在结束正文标记之前，我什至尝试了一个不符合标准的方法，将其放置在结束头标签和开始身体标签之间，所有这些方法都导致了同样的问题。结果是，无论我将模态放置在何处，都会遇到相同的问题，即模态本身出现在灰色后台后面。

我的模态 HTML 是...

<!-- Admin Login Modal -->
    <div id="admin-login-modal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button>
                    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                </div>
                <div class="modal-body">
                    <h4>Text in a modal</h4>
                    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                    <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
    <!-- End Login Modal -->

目前我将它定位在开始的正文标记之后。

感谢您提供任何帮助。

Answer 1

删除您的代码并粘贴此代码然后检查.. 我认为它会正常工作

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>`

Answer 2

我已经设法解决了这个问题，在 bootstrap.min.css 样式表中找到类 .modal-dialog 并添加 z-index: 1050;.