Угловой UI Модальный с высоким индексом z не сверху

Question

In this plunk У меня есть Угловой UI Modal с индексом z больше, чем div z-index, однако div покрывает модальный. Если вы нажмете на div, вы увидите, что модальность позади.

Поскольку z-индекс модальности больше, я ожидаю, что он будет на вершине div. Как это можно зафиксировать?

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

Answer 1

Для того, чтобы сделать эту работу вы должны создать собственный стиль для z-index собственности:

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

и применить класс к модальному окну:

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

Пример: http://plnkr.co/edit/4T5Om0EcFAh5i4WUgNYi?p=preview

Answer 2

Попробуйте использовать Z-индекс с относительным положением.

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> 

Для справки: set Z index not working. button behind a container (HTML - CSS)

Answer 3

Try, чтобы положить Z-индекс на модальной-диалоге вместо заголовка и использовать модальный-тело:

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