Question

我有一个问题，出现在模态的灰色后台后面的Bootstrap模态小部件阻止我对模态本身做任何事情，当我点击模态本身时它仍然消失。

我已经检查了我在这里找到的其他建议的解决方案以及其他网站，包括将它移到任何父容器之外，这样它就在开始的body标签之后，就在关闭body标签之前，我甚至试过了一个通过将其置于封闭头标签和开口体标签之间的非标准兼容方法，所有这些方法都导致了同样的问题。结果是无论我在哪里定位模态，我都会在灰色后台出现模式本身时遇到同样的问题。

我的模态HTML是......

SELECT * FROM ( (SELECT A.COL AS AC_1, B.COL AS BC_1 FROM A, B WHERE AC_1 = 'someconst') CROSS JOIN (SELECT A.COL AS AC_2, B.COL AS BC_2 FROM A, B WHERE AC_2 = 'another_const')) WHERE BC_1 <> BC_2 LIMIT 1

目前我把它放在开口身体标签后面。

对此有任何帮助表示赞赏。

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

后台后面的Bootstrap模式

2 个答案: