具有高 z-index 的 Angular UI Modal 不在顶部 [英] Angular UI Modal with high z-index not on top

问题描述

在这个 plunk 我有一个 z-index 大于一个 div z-index，但是 div 覆盖了模态.如果你点击 div，你会看到模态在后面.

由于模态的 z-index 较大，我希望它位于 div 的顶部.如何解决这个问题?

HTML

<script type="text/ng-template" id="myModalContent.html"><div class="modal-header" ng-style="{'z-index': 99000}"><h4 class="modal-title">标题</h4>
模态中的一些文本

Javascript

var app = angular.module('app', ['ui.bootstrap']);app.controller('ctl', function ($scope,$uibModal) {$scope.show = true;(功能() {$scope.modalInstance = $uibModal.open({templateUrl: 'myModalContent.html'});})();$scope.hide = function(){$scope.show = false;};});

CSS

.div1 {位置:固定；z-索引:90000；左:0；顶部:0；宽度:100%；高度:100%；溢出:自动；背景颜色:蓝色；}

解决方案

为了使这项工作有效，您必须为 z-index 属性创建自定义样式:

.zindex {z-index:99000！重要；}

并将类应用到模态窗口:

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

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

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

解决方案

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

这篇关于具有高 z-index 的 Angular UI Modal 不在顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！