twitter bootstrap 3 和 bootswatch 完全模板 - 模态不再工作

Question

在我从 bootswatch (https://bootswatch.com/flatly/) 安装 flatly 模板后，twbs 的正常模式 window 不再工作。

<a data-toggle="modal" href="#" data-target="#myModal">CLICK!</a>
.
.
        <!-- Modal -->
        <div class="modal fade" id="myModal" 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-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>

    </body>
</html>

在我将主题添加到我的应用程序之前，它工作得很好。

这意味着模态 window 出现了，但是没有激活。模态 window 出现在灰色背景后面。模态 window 没有焦点。我也关不掉但是为什么？

Answer 1

这样试试：

<div class="modal">
    <div class="modal-dialog">
        <div class="modal-content">
             <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                   <h4 class="modal-title">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 v3.3.2 并且 Flatly css 文件中的版本是 v3.3.4

所以我将 bootstrap.js 文件更新到最新版本（目前是 3.3.4）并且它有效。

希望对您有所帮助。

Answer 3

Bootstrap 在其变量文件中为以下项目设置 z-index：

@zindex-navbar:            1000;
@zindex-dropdown:          1000;
@zindex-popover:           1060;
@zindex-tooltip:           1070;
@zindex-navbar-fixed:      1030;
@zindex-modal-background:  1040;
@zindex-modal:             1050;

bootswatch 变量文件中项目的 z-index 设置如下：

@zindex-navbar:            1000;
@zindex-dropdown:          1000;
@zindex-popover:           1060;
@zindex-tooltip:           1070;
@zindex-navbar-fixed:      1030;
@zindex-modal:             1040;

如您所见，bootswatch 模态设置在与 bootstrap 模态背景相同的索引上。这种冲突导致了问题。将 bootswatch 模式的 z-index 设置为 1050 将解决您的问题，或者在您网站的样式表中添加对 .modal z-index 的覆盖也会有所帮助。

.modal {z-index: 1050;}

Answer 4

感谢史蒂夫！确切的覆盖，对我有帮助（与 Flatly 有同样的问题）：

.modal-dialog {
  z-index: 1050;}

twitter bootstrap 3 和 bootswatch 完全模板 - 模态不再工作

twitter bootstrap 3 and bootswatch flatly template - modal not working anylonger

css

modal-dialog

twitter-bootstrap

bootswatch

bootstrap-modal