Javascript 爱奥尼亚Popover视图显示在爱奥尼亚模态视图后面
我有一个问题,如果我点击一个按钮,它应该显示我的模态视图,当我点击模态视图上的按钮时,它应该显示我的ionicpopover。示例在我的代码笔中 这在开始时有效,但在第二次尝试时,popover的视图显示在模式后面。我已经把它缩小到模态背景的z-index有一个z-index:10,但是我也为我的z-index:999加入了我的popover风格,尽管它似乎没有帮助 我们非常感谢您提供的任何帮助Javascript 爱奥尼亚Popover视图显示在爱奥尼亚模态视图后面,javascript,twitter-bootstrap,ionic-framework,ionic-popup,Javascript,Twitter Bootstrap,Ionic Framework,Ionic Popup,我有一个问题,如果我点击一个按钮,它应该显示我的模态视图,当我点击模态视图上的按钮时,它应该显示我的ionicpopover。示例在我的代码笔中 这在开始时有效,但在第二次尝试时,popover的视图显示在模式后面。我已经把它缩小到模态背景的z-index有一个z-index:10,但是我也为我的z-index:999加入了我的popover风格,尽管它似乎没有帮助 我们非常感谢您提供的任何帮助 <html ng-app="ionicApp"> <head>
<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;
});
});
离子爆米花
点击我
拯救
angular.module('ionicApp',['ionic']))
.controller('AppCtrl',函数($scope、$ionicPopover、$IonicModel){
$scope.closeModal=函数(){
$scope.modal1.hide();
$scope.modal1.remove();
}
$scope.showImagesDetailed=函数(){
console.log(“单击”)
$ionicModal.fromTemplateUrl('image-modal2.html'{
范围:$scope,
动画:“向上滑动”
}).then(功能(模态){
$scope.modal1=模态;
$scope.modal1.show();
});
$scope.$on(“$destroy”,函数(){
$scope.modal1.remove();
});
}
$ionicPopover.fromTemplateUrl('templates/popover.html'{
范围:$scope,
}).then(功能(popover){
$scope.popover=popover;
});
});
z索引很好。我所需要做的就是添加这个css
.popover.active {
opacity: 1;
}
这似乎与这个问题有关:Hey@Kingsley,你找到解决这个问题的方法了吗?谢谢@我想是的,但记不得了,。你有什么问题?到底是相似还是不同?我可以帮忙。就我而言,我必须设定高度。我在一个复杂的阴影中使用它,不知怎的高度变成了0。