Angulaire de l'INTERFACE utilisateur Modal avec un grand z-index non sur le dessus

Dans ce plunk J'ai Angulaire de l'INTERFACE utilisateur Modal avec un z-index plus grand qu'un div z-index, cependant, la div se couvrant le modal. Si vous cliquez sur la div, vous verrez que le modal est derrière.

Depuis le z-index de la modale est plus grand, on peut s'attendre à être sur le dessus de la div. Comment cela peut-il être fixé?

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;
}
Je vous suggère de lire ceci de la page à propos de CSS techniques de superposition.
Je l'ai lu, mais je ne sais toujours pas comment changer Angulaire modal de styles, ils ne semblent pas fonctionner avec CSS ou ng-style

OriginalL'auteur ps0604 | 2016-07-05

  1. 9

    Pour faire ce travail, vous devez créer un style personnalisé pour le z-index propriété:

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

    Et de les appliquer à la classe de la fenêtre modale:

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

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

    Merci beaucoup pour cette solution. Totalement fixé mon problème. Pouvez-vous expliquer pourquoi cela fonctionne?
    Le windowClass propriété est utilisée pour ajouter de la classe modale de l'emballage extérieur, dans ma réponse, j'ai ajouté une classe appelée zindex (C'est le nom de la classe que j'ai choisi) et dans le CSS, j'ai ajouté un style à la catégorie qui remplace la valeur par défaut modal de la propriété z-index - Vous pouvez le lire dans le documentation à propos de la windowClass de la propriété pour plus d'informations

    OriginalL'auteur Alon Eitan

  2. 1

    Essayez d'utiliser le z-index avec position relative.

    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>

    Pour référence : ensemble Z index ne fonctionne pas. bouton derrière un conteneur (HTML - CSS)

    OriginalL'auteur Hongbin Wang

  3. 0

    Essayez de mettre votre z-index sur la modale de dialogue au lieu de la tête de 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>

    OriginalL'auteur David H.