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

问题

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?

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

回答2:

I had encountered the same problem. But then I noticed that I was using Bootstrap v3.3.2 and the version in Flatly css file was v3.3.4

So I updated the bootstrap.js file to the latest version (which is currently 3.3.4) and it worked.

Hope this helps.

回答3:

Thanks to Steve! The exact override, that helped me (had same issue with Flatly):

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

回答4:

Try like that :

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

来源：https://stackoverflow.com/questions/29144858/twitter-bootstrap-3-and-bootswatch-flatly-template-modal-not-working-anylonger

标签

css

twitter-bootstrap

modal-dialog

bootstrap-modal

bootswatch