5

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;
}
2
  • I suggest you to read this page about CSS overlay techniques.
    – Matheno
    Commented Jul 5, 2016 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
    Commented Jul 5, 2016 at 15:25

3 Answers 3

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

2
  • Thanks very much for this solution. Totally fixed my problem. Can you explain why it works?
    – sheac
    Commented Jul 4, 2017 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 about the windowClass property for more information
    – Alon Eitan
    Commented Jul 5, 2017 at 9:20
3

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)

1

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.