Bootstrap v 3.1.1背景幕涵盖模态

Question

我的一个网站没有使用Twitter Bootstrap。在一个页面中，我需要一些Bootstrap功能，所以我以这种方式包含它：

<link rel="stylesheet" href={"stylesheets/bootstrap.css"} type="text/css" />
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

我想要一个Bootstrap模式，所以我使用了以下代码：

<a class="btn btn-primary btn-large" data-toggle="modal" data-target=".modal">Launch demo modal</a>

<div class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <a class="close" data-dismiss="modal">×</a>
                <h3>This is a Modal Heading</h3>
            </div>
            <div class="modal-body">
                <h4>Text in a modal</h4>
                <p>You can add some text here.</p>
            </div>
            <div class="modal-footer">
                <a href="#" class="btn btn-success">Call to action</a>
                <a href="#" class="btn" data-dismiss="modal">Close</a>
            </div>
        </div>
    </div>
</div>

问题是当模态出现时它会褪色，页面也会变淡并且无法点击。我也无法关闭页面的模态。

我正在使用Bootstrap 3.1.1和jQuery 1.7.2

Answer 1

解决方案＃1

将jQuery v1.7.2更改为升级版本。请参阅bootstrap 3.1.1的依赖项：

{
  "name": "bootstrap",
  "version": "3.1.1",
  .
  .
  .
  "dependencies": {
    "jquery": ">= 1.9.0"
  }
}

解决方案＃2

检查stylesheets/bootstrap.css也是v3.1.1。当js和css版本不匹配时，可能会发生此问题。

/*!
 * Bootstrap v3.1.1 (http://getbootstrap.com)
 * Copyright 2011-2014 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

解决方案＃3

Bootstrap模式容器和所有父元素不应该有position: fixed;（有时也是relative）。

尝试从父容器中取出模态。最好的位置就在</body>结束标记之前。

解决方案＃4

不太推荐但工作的解决方案是向背景

提供否定z-index

.modal-backdrop {
  z-index: -1;
}

当模态故意在固定容器内时，它是一个很好的解决方案。 see example