Modal on top of modal

i am using ionic v1 to create portable app android and ios that is used to configure an application on a smart-mirror.

there are 5 data pages in a circular slider, each page presents a table of the data for that config type.

to edit one of the rows, double click, and a modal dialog pops up (slide-in-up), with the data you can configure for that type… entry fields, drop downs, check boxes… all works good.

in a couple of the data types, the entryfield is really a file path to some data accessible from the mirror application. I have rest apis to get/set the data items… and one to navigate the data path (like windows explorer type view)…

so you double click the path, and a NEW dialog appears over the prior one, with a file list from the path
you can double click to nav further or back (…) and it refreshes the file nav with the latest data… when u select a folder or some files and click save, the return handler in the data type modal gets control and updates the modal display. the user can save or cancel.

the data in the file nav is an ion-scroll in an ion-grid. from an html template in index.html

problem… the new modal is parented on top of the data type modal, which is centered, and so the top of the file modal is forced to the top of the datatype modal… (can’t be above your parent)…
i want this to be centered about 95% height and width of device

three images, main page, edit dialog, and file chooser dialog on top

Did you use the ModalController to present your modals?

sadly i am not sure . wrote about a year ago, getting back to it… new Ios release has changed some behaviors. but I think this is a prior issue.

I built a table of modal definitions
here for the topmost

    			$scope.modal['file'] = $ionicModal;
		    scope: $scope,    
    		animation: 'slide-in-up'

and then to open

   $scope.openModal = function(type) {    

to open

and the template

<script id="filemodal.html" type="text/ng-template">
      <ion-modal-view hide-back-button="false" style="width:90%; height:150%;  left: 5%; top=-20%">

          <h1 class="title"> Files</h1>


            <div class="row">
              <div class="col"> 
       				  <div class="button" ng-click="closeModal('file',null)">Cancel <span class="icon ion-close"></span></div>
          			  <div class="button" ng-click="saveModal('file')">Save <span class="icon ion-done-all"></span>	</div>
           	<div class="row ">
           	<div class="col dashed-border" >{{parentpath}}</div>
									<div class = "row">
										<span class="col colb col-10 center">Select</span>
										<span class="col colb col-10 center">Type</span>
										<span class="col colb ">Name</span>
								<ion-scroll  direction="y" scrollY="true"  style="width: 100%; height: 450px; "> 						
									<div class = "row item" ng-repeat="file in files track by $index"> 
										 <div class="col colb col-10 checkbox" >				<!--  --> 					
         							 <input ng-model="file.selected" type="checkbox" id="vselected" ng-checked="isSelected(files,$index)"/> 
										 <span class = "col colb col-10 center" >{{file.filetype}}</span> 									 
										 <span class = "col colb" double-click="doubleClick(file,false)" 

It looks like you’re using Ionic-v1, saidly I’ve never used Ionic-v1… The Ionic 2+ has a ModalController which overlays your modal nicely on the parent page. But I can’t help you here.

it’s indeed Ionic v1, please update the category of your post, more people would be able to help you (unfortunately, I don’t know AngularJS)

done, thanks for that

i now have my ionic V2 app working with modal over modal… thanks for the nudge…