具有高z指數的角度UI模態不在頂部

In this plunk我有一個Z-index大於div z-index的角度UI模態，但是div覆蓋了模態。如果你點擊div，你會發現模式已經落後了。具有高z指數的角度UI模態不在頂部

由於模態的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; 
}

來源

2016-07-05 ps0604

我建議你閱讀[this]（http://tympanus.net/codrops/2013/11/07/css-overlay-techniques/）關於CSS疊加技術的頁面。 – Matheno

我讀過它，但我仍然不知道如何更改Angular的模式風格，它們似乎不適用於'CSS'或'ng-style' – ps0604

爲了使這項工作必須爲z-index屬性創建自定義樣式：

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

和類適用於模態窗口：

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

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

來源

2016-07-05 15:25:18

非常感謝這個解決方案。完全解決了我的問題。你能解釋它爲什麼有效嗎？ – sheac

@sheac'windowClass'屬性用於添加任何類到模態外包裝，在我的答案中我添加了一個名爲'zindex'的類（這是我選擇的類名），並且在CSS中我爲該類添加了樣式這會覆蓋默認模態的z-index屬性 - 您可以在[documentation]（http://angular-ui.github.io/bootstrap/#!#modal）中關於「windowClass'屬性閱讀以獲取更多信息 –

嘗試使用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)

來源

2016-07-05 15:25:29

儘量把對模態的對話中你的z-index，而不是頭，並使用模式體：

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

來源

2016-07-05 15:32:39

具有高z指數的角度UI模態不在頂部

回答

相關問題