twitter bootstrap 3和bootswatch扁平化模板-模态不再起作用 [英] twitter bootstrap 3 and bootswatch flatly template - modal not working anylonger

问题描述

从bootswatch安装Flatly模板后( https://bootswatch.com/flatly/)twbs的正常模态窗口不再起作用.

After I had install the flatly template from bootswatch (https://bootswatch.com/flatly/) the normal modal window of twbs is not working anylonger.

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

在将主题添加到应用程序之前，它是完美的工作方式.

It is work perfectly until I add the theme into my application.

这意味着将出现模式窗口，但它不处于活动状态.模态窗口出现在灰色背景的后面.模态窗口没有焦点.我也无法关闭但是为什么呢?

This means that the modal window appear, but it is not active. the modal window appears behind the grey background. the modal window has not the focus. I can't close it too. But why?

推荐答案

Bootstrap为变量文件中的以下项目设置z-index:

Bootstrap set the z-index for the following items in their variables file:

@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设置如下:

The z-index for items in bootswatch varables file is set as follows:

@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添加替代也将有所帮助.

As you can see, the bootswatch modal is set on the same index as bootstrap's modal background. This conflict is causing issues. Setting the z-index for bootswatch's modal to 1050 will fix your issue, or adding an override to the .modal z-index in your site's stylesheet will help as well.

.modal {z-index: 1050;}

这篇关于twitter bootstrap 3和bootswatch扁平化模板-模态不再起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！