Angular UI Modal mit hohem Z-Index nicht oben

Question

In this plunk Ich habe ein Angular UI Modal mit einem Z-Index, der größer als ein div Z-Index ist, jedoch deckt das Div das Modal ab. Wenn Sie auf das Div klicken, sehen Sie, dass das Modal dahinter ist.

Da der Z-Index des Modals größer ist, erwarte ich, dass es oben auf dem Div ist. Wie kann das behoben werden?

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

Um diese Arbeit zu machen Sie einen benutzerdefinierten Stil für die z-index Eigenschaft erstellen müssen:

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

Und die Klasse zu dem modalen Fenster gilt:

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

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

Answer 2

Try Z-Index mit relativer Position zu verwenden.

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> 

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

Answer 3

Versuchen Sie, Z-Index auf den Modal-Dialog anstelle des Headers zu setzen und Modal-Körper zu verwenden:

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