Bootstrap Modal弹出但有一个"有色"页面,无法进行交互

Question

我正在使用bootstrap来设置模态弹出窗口.单击一个按钮时,模态对话框打开,但整个页面略微"着色",我无法与模态进行交互(页面基本上冻结).你知道为什么会这样吗？这是代码:

按钮:

<a class="add-list-button-no-margin opener" id="id" data-toggle="modal" href="#myModal" style="color: white; font:14px / 14px 'DINMedium','Helvetica Neue',Helvetica,Arial,sans-serif;">Play my city</a>

模式:

<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">

          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Congratulations!</h4>
          </div>
          <div class="modal-body">
            <h4>Text in a modal</h4>
            <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>

            <h4>Popover in a modal</h4>
            <p>This <a href="#" role="button" class="btn btn-default popover-test" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on click.</p>

            <h4>Tooltips in a modal</h4>
            <p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> should have tooltips on hover.</p>

            <hr>

            <h4>Overflowing text to show optional scrollbar</h4>
            <p>body</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><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

编辑:

以下是包含的文件:

<link media="all" type="text/css" rel="stylesheet" href="http://crowdtest.dev:8888/assets/CSS/style.css">
<link media="all" type="text/css" rel="stylesheet" href="http://crowdtest.dev:8888/assets/CSS/jquery-ui-1.10.1.custom.min.css">
<link media="all" type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css">

<link media="all" type="text/css" rel="stylesheet" href="http://crowdtest.dev:8888/assets/CSS/bootstrap.css">

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>
<script src="http://crowdtest.dev:8888/assets/js/script.js"></script>
<script src="http://crowdtest.dev:8888/assets/js/jquery-ui-1.10.1.custom.min.js"></script>

<script src="http://crowdtest.dev:8888/assets/js/bootstrap.js"></script>

编辑:尝试所有浏览器(Chrome,Firefox,Safari)

Answer 1

好的,所以我想出了这个问题.

如果模态容器具有固定位置或位于具有固定位置的元素内,则会发生此行为.

最简单的方法是移动模态div,使其位于任何具有特殊定位的元素之外.一个好地方可能就在关闭身体标签之前.

这就是我所做的,而且它有效.

Answer 2

这发生在我身上,诊断需要很长时间.如果它发生在您身上,请将其添加到您的CSS中:

div.modal div.modal-backdrop {
    z-index: 0;
}

编辑:您可能需要更具体的特征来获取此设置.正如Nick Spoon建议的那样,你可以使用

body.modal-open div.modal-backdrop { 
    z-index: 0; 
}

您可能需要添加更多限定符,具体取决于CSS的其余部分.你也可以使用!important,但这只是在地毯下扫除问题.

Answer 3

通过添加data-backdrop="false"到主div来解决它：

<div class="modal fade" data-backdrop="false" tabindex="-1" role="dialog">
  ......
</div>