2

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?

goldlife
  • 1,949
  • 3
  • 29
  • 48

4 Answers4

5

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;}
Steve Carroll
  • 66
  • 2
  • I had to add .modal-dialog {z-index: 1050;} as well to get it to work for me, but together these two rules fixed this issue for me. My Bootstrap modal now works as it should. Thanks, Steve. – RoboBear Dec 04 '15 at 19:44
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.

deep
  • 21
  • 1
2

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

.modal-dialog {
  z-index: 1050;}
GitaarLAB
  • 14,536
  • 11
  • 60
  • 80
Alexey
  • 1,914
  • 16
  • 13
  • 2
    Please don't add "thank you" as an answer. Once you have sufficient [reputation](http://stackoverflow.com/help/whats-reputation), you will be able to [vote up questions and answers](http://stackoverflow.com/help/privileges/vote-up) that you found helpful. – dbugger Apr 03 '15 at 17:31
  • Welcome to StackOverflow Alex. Removing attribution (and thanks) to [Steve's answer](http://stackoverflow.com/a/29288805/588079), from which you merely wanted to report that this worked for you, is *not* what @dbugger meant with his comment.. What he meant to say was that on StackOverflow it is 'frowned upon' to repeat (part of) an answer to report that worked and say thanks to the user that posted that info (we are actually encouraged to flag those as 'not an answer'). Instead we vote up (and when needed or helpful, we leave a comment to that helpful answer). – GitaarLAB Apr 04 '15 at 19:09
0

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>
Charly
  • 125
  • 8