Angular UI Modal with high z-index not on top

Question

In this plunk I have an Angular UI Modal with a z-index larger than a div z-index, however the div is covering the modal. If you click on the div, you'll see that the modal is behind.

Since the z-index of the modal is larger, I expect it to be on top of the div. How can this be fixed?

HTML

<div class="div1" ng-click="hide()" ng-show="show" >
  CLICK ME
</div>


<script type="text/ng-template" id="myModalContent.html">

<div class="modal-header" ng-style="{'z-index': 99000}">
    <h4 class="modal-title">The Title</h4>
</div>
  SOME TEXT IN THE MODAL

</script>

Javascript

var app = angular.module('app', ['ui.bootstrap']);
app.controller('ctl', function ($scope,$uibModal) {

    $scope.show = true;

    (function() {
          $scope.modalInstance = $uibModal.open({
              templateUrl: 'myModalContent.html'
            }); 


    })();


    $scope.hide = function(){
      $scope.show = false;
    };

});

CSS

.div1 {
  position: fixed;
  z-index: 90000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: blue;
}

I suggest you to read [this](http://tympanus.net/codrops/2013/11/07/css-overlay-techniques/) page about CSS overlay techniques. — Matheno, Jul 05 '16 at 15:17
I read it, but I still don't know how to change Angular's modal styles, they don't seem to work with `CSS` or `ng-style` — ps0604, Jul 05 '16 at 15:25

score 15 · Accepted Answer · answered Jul 05 '16 at 15:25

15

In order to make this work you must create a custom style for the z-index property:

.zindex {
  z-index: 99000 !important;
}

And apply the class to the modal window:

$scope.modalInstance = $uibModal.open({
      templateUrl: 'myModalContent.html',
      windowClass: 'zindex'
});

Example: http://plnkr.co/edit/4T5Om0EcFAh5i4WUgNYi?p=preview

answered Jul 05 '16 at 15:25

Alon Eitan

11,997
8
49
58

Thanks very much for this solution. Totally fixed my problem. Can you explain why it works? – sheac Jul 04 '17 at 23:55
1

@sheac The `windowClass` property is used to add any class to the modal outer wrapper, in my answer I added a class called `zindex` (That's the class name I chose) and in the CSS I added a style to that class that overrides the default modal's z-index property - You can read in the [documentation](http://angular-ui.github.io/bootstrap/#!#modal) about the `windowClass` property for more information – Alon Eitan Jul 05 '17 at 09:20

score 3 · Answer 2 · edited May 23 '17 at 12:26

Try to use z-index with relative position.

HTML

<div class="div1" ng-click="hide()" ng-show="show" >
  CLICK ME
</div>

<script type="text/ng-template" id="myModalContent.html">

<div class="modal-header" style="z-index: 99000; position:relative;">
    <h4 class="modal-title">The Title</h4>
</div>
  SOME TEXT IN THE MODAL

</script>

For reference : set Z index not working. button behind a container (HTML - CSS)

score 1 · Answer 3 · answered Jul 05 '16 at 15:32

Try to put your z-index on the modal-dialog instead of the header and use modal-body:

<div class="div1" ng-click="hide()" ng-show="show" >
  CLICK ME
</div>


<script type="text/ng-template" id="myModalContent.html">

<div class="modal-dialog" style="z-index: 99000 !important">
    <div class="modal-header">
        <h4 class="modal-title">The Title</h4>
    </div>
    <div class="modal-body">
        SOME TEXT IN THE MODAL
    </div>
</div>
</script>

Angular UI Modal with high z-index not on top

3 Answers3

Linked