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

Question

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?

Answer 1

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;

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;

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