高いz-インデックスを持つ角のあるUIモダールが上にない

Question

In this plunk私は、divインデックスではなくz-インデックスを持つ角のUIモーダルを持っていますが、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; 
    }; 

}); 

この作品はあなたがz-indexプロパティのカスタムスタイルを作成する必要がありますようにするためにCSS

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

Answer 1

：

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

モーダルウィンドウにクラスを適用する：

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

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

Answer 2

は相対位置とZインデックスを使用してみてください。参考のため

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

HTML：set Z index not working. button behind a container (HTML - CSS)

Answer 3

ではなく、ヘッダーのモーダルダイアログ上の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>