离子弹出窗口视图显示在离子模态视图后面

ionic Popover view displays behind ionic modal view

本文关键字：视图 模态 显示 子弹 窗口      更新时间：2023-09-26

我有这个问题，即如果我点击一个按钮，它应该显示我的模态视图，当我点击我的模态视图上的按钮，它应该显示我的ionicpopover。例子是在我的codepen。http://codepen.io/anon/pen/yNrmXK

这最初工作，但第二次尝试，弹出窗口的视图显示在模态后面。我已经将其缩小到模式背景的z-index有一个z-index: 10，但我也把我的弹出式样式为我的z-index: 999，尽管它似乎没有帮助。

我们非常感谢您提供的任何帮助。

<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
    <title>Ionic Popover</title>
    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
  </head>
  <body class="platform-ios" ng-controller="AppCtrl">
    <div class="row bar bar-header">
      <button ng-click="showImagesDetailed()">
        Click Me
      </button >
    </div>
    <script id="image-modal2.html" type="text/ng-template" style="z-index: -1; position: fixed;">
  <div class="modal image-modal transparent" on-swipe-down="closeModal()"> 
  <ion-header-bar class="dark-bg" ng-click="popover.show($event)">
    <div class="buttons buttons-right header-item pull-right">
      <button class="button button-icon button-clear ion-android-more-vertical"></button>
    </div>
  </ion-header-bar>
    <ion-slide-box active-slide="activeSlide" >
      <ion-slide>
        <ion-scroll direction="xy" scrollbar-x="false" scrollbar-y="false" zooming="true" min-zoom="{{zoomMin}}" style="width: 100%; height: 100%" delegate-handle="scrollHandle{{$index}}"> 
          <div class="image" style="background-image: url( 'http://www.petfinder.com/wp-content/uploads/2012/11/guidelines-for-placing-your-bird-thinkstock-93216977.jpg')"></div>   
        </ion-scroll>
      </ion-slide>
    </ion-slide-box>
  </div>
</script>
    <script id="templates/popover.html" type="text/ng-template">
      <ion-popover-view style="z-index: 999; position: absolute;">
    <ion-content class="light-bg">
      <div class="list light-bg">
        <button class="item light-bg button" ng-click="downloadImage($index, detailedCaseInfo.real_estate_agent_assignment_attachments)">
          <h4>Save</h4>
        </button>
      </div>
    </ion-content>
  </ion-popover-view>
    </script>
  </body>
</html>
angular.module('ionicApp', ['ionic'])
.controller('AppCtrl', function($scope, $ionicPopover, $ionicModal) {

  $scope.closeModal = function() {
      $scope.modal1.hide();
      $scope.modal1.remove();
  }
  $scope.showImagesDetailed = function() {
    console.log("clicked")
 $ionicModal.fromTemplateUrl('image-modal2.html', {
        scope: $scope,
        animation: 'slide-in-up'
      }).then(function(modal) {
        $scope.modal1 = modal;
        $scope.modal1.show();
      });
    $scope.$on('$destroy', function() {
      $scope.modal1.remove();
    });
  }
  $ionicPopover.fromTemplateUrl('templates/popover.html', {
    scope: $scope,
  }).then(function(popover) {
    $scope.popover = popover;
  });
});

z-index很好。我所需要做的就是添加这个css 

.popover.active {
    opacity: 1;
}

似乎与这个问题有关:https://forum.ionicframework.com/t/popover-fails-to-render/10848

相关文章：