Angular UI 具有高 z-index 的模态不在顶部

Question

In this plunk 我有一个 Angular UI 模态，其 z-index 大于 div z-index，但是 div 正在覆盖模态。如果你点击 div，你会看到模式在后面。

由于模态框的 z-index 较大，我希望它位于 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;
}

并将class应用于模态window:

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

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

Answer 2

尝试使用具有相对位置的z-index。

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

尝试将 z-index 放在 modal-dialog 而不是 header 上，并使用 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 具有高 z-index 的模态不在顶部

Angular UI Modal with high z-index not on top

angularjs

angular-ui

angular-ui-bootstrap