離子彈窗視圖顯示在離子模態視圖後

我有這個問題，如果我點擊一個按鈕，它應該顯示我的模態視圖，當我點擊我的模態視圖上的按鈕時，它應該顯示我的離子效果。例如在我的codepen中。 http://codepen.io/anon/pen/yNrmXK 離子彈窗視圖顯示在離子模態視圖後

這起作用，但在第二次嘗試時，彈出窗口的視圖顯示在模態後面。我將它縮小到了模式背景的z-index有z-index：10，但我也爲我的z-index指定了popover樣式：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; 
    }); 
});

來源

2015-08-15 Kingsley Simon

嘿@Kingsley，你有沒有發現這方面的任何解決方案？謝謝！ – pcsantana

@pcsantana我相信我做過但不記得。你有什麼問題？它是完全相似還是不同？我可以幫忙。 –