Css TwitterBootstrap3和BootswatchFlatly模板-模式不再工作

在我从bootswatch（）安装了flatly模板之后，twbs的正常模式窗口不再工作

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

.
.
&时代；
情态标题
...
接近
保存更改

在我将主题添加到我的应用程序中之前，它是完美的

这意味着模式窗口将出现，但它不是活动的。 模式窗口显示在灰色背景后面。模态窗口没有焦点。我也关不上。 但是为什么呢？

试着这样做：

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

×
情态标题
...
接近
保存更改

我遇到了同样的问题。 但是后来我注意到我使用的是Bootstrapv3.3.2，而Flatly css文件中的版本是v3.3.4

因此，我将bootstrap.js文件更新为最新版本（当前为3.3.4），并成功运行

---

希望这有帮助。

引导设置变量文件中以下项目的z索引：

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

bootswatch varables文件中项目的z索引设置如下：

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

如您所见，引导样例模式设置在与引导模式背景相同的索引上。这场冲突正在引发一些问题。将bootswatch的modal的z-index设置为1050将解决您的问题，或者在站点的样式表中添加对.modal z-index的覆盖也将有所帮助

.modal {z-index: 1050;}

---

感谢史蒂夫！准确的覆盖，这帮助了我（与Flatly有相同的问题）：

---

请不要加上“谢谢”作为回答。一旦你有足够的资源，你将能够找到对你有帮助的资源。欢迎来到StackOverflow Alex。@dbugger的评论并不是指删除归因（和感谢），因为你只是想从中报告这对你有用。。他想说的是，在StackOverflow上，重复（部分）有效的报告答案并向发布该信息的用户表示感谢是“不受欢迎的”（我们实际上被鼓励将这些标记为“非答案”）。相反，我们投了赞成票（当需要或有帮助时，我们会对这个有帮助的答案留下评论），我不得不添加.modal dialog{z-index:1050；}来让它为我工作，但这两条规则一起解决了这个问题。我的引导模式现在可以正常工作了。谢谢，史蒂夫。

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