# Ionic 2 modal and view stack automatically

**URL:** <https://forum.ionicframework.com/t/ionic-2-modal-and-view-stack-automatically/45628>\
**Category:** ionic-v3\
**Created:** [March 6, 2016, 7:51am UTC](https://forum.ionicframework.com/t/ionic-2-modal-and-view-stack-automatically/45628 "2016-03-06T07:51:08Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![tzookb](https://avatars.discourse-cdn.com/v4/letter/t/5daacb/32.png) [@tzookb](https://forum.ionicframework.com/u/tzookb)\
**Post date:** [March 6, 2016, 7:51am UTC](https://forum.ionicframework.com/t/ionic-2-modal-and-view-stack-automatically/45628/1 "2016-03-06T07:51:08Z")

</div>

I’m building a new app with ionic 2, it’s a workout app.

one page handles the whole “workout”, means it loos over the exercises and launches modal for showing the exercise and launches modal for the “rest” timer.

My problem is when I add modal with user events the app get blacked out…

example code:

```
 export class WorkoutRunnerPage {
     workout: Workout;
     currentRoutine: Routine;
     routineIndex = 0;

    constructor(nav: NavController, navParams: NavParams) {
        console.log('workout runner constructor');
        this.workout = navParams.get('workout');
        this.nav = nav;
        this.start();
    }

   start() {
        let routine = this.workout.routines[this.routineIndex];
        let modal = Modal.create(ExerciseModal, {routine: routine});
        this.nav.present(modal);
    }

```

now this is the exercise Modal

```
export class ExerciseModal {
       constructor(nav: NavController, params: NavParams) {
            this.nav = nav;
            this.exercise = params.get('exercise');
            this.reps = params.get('reps');
        }

       close() {
           this.nav.pop();
       }

```

As you can see, the user doesn’t interact with the workout page… it launches it automaticly but when user closes the exercise modal it goes back to the main application page and not to the exercise page.

---

<div class="post-metadata">

**Author:** ![7freaks\_otte](https://avatars.discourse-cdn.com/v4/letter/7/58f4c7/32.png) [@7freaks\_otte](https://forum.ionicframework.com/u/7freaks_otte)\
**Post date:** [May 9, 2016, 2:54pm UTC](https://forum.ionicframework.com/t/ionic-2-modal-and-view-stack-automatically/45628/2 "2016-05-09T14:54:04Z")

</div>

Had no time to check your code but in my case I had to delay the modal (open and/or close) with setTimeout for 200ms as some page transitions where in progress at the same moment. My app showed a black screen because it didn’t know what view was active underneath the modal.  
But maybe this was just my problem and in your case it’s the nav.pop(). I don’t think you need that here because the modal is not added to the view stack, so no need to pop it, I think you pop the previous view instead.

---

<div class="post-metadata">

**Author:** ![iignatov](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/iignatov/32/100112_2.png) [@iignatov](https://forum.ionicframework.com/u/iignatov)\
**Post date:** [May 9, 2016, 5:40pm UTC](https://forum.ionicframework.com/t/ionic-2-modal-and-view-stack-automatically/45628/3 "2016-05-09T17:40:30Z")

</div>

> [@tzookb](#):
>
> but when user closes the exercise modal it goes back to the main application page and not to the exercise page.

@tzookb Probably you already figured it out, but Modals are not added to the navigation stack _(like the Pages)_ so in your modal code you should not use `pop()` but `dismiss()` instead _(and also `ViewController` instead of `NavController`)_:

```auto
export class ExerciseModal {
  // ...
  constructor(params: NavParams, private view: ViewController) {
    // ...
  }

  close() {
    this.view.dismiss();
  }
  // ...
}

```

@7freaks_otte Could you give some details, e.g. the output of `ionic info`, code sample?

> [@7freaks\_otte](#):
>
> I had to delay the modal (open and/or close) with setTimeout for 200ms as some page transitions where in progress at the same moment. My app showed a black screen because it didn’t know what view was active underneath the modal.

This behavior might be related to the following issue:

> <https://github.com/ionic-team/ionic-framework/issues/6453>
>
> \#### Short description of the problem:
> 
> When NavController present a modal M on… a page P's onPageLoaded() function, closing M will not only dismiss M but also "dismiss" P
> \#### What behavior are you expecting?
> 
> Closing M only dismiss M, and not dismiss P
> 
> I am using Ionic2.beta.6
> \#### Plunker that shows an example of your issue
> 
> http://plnkr.co/edit/uhk2awxpmxnYSVv3DCe8?p=preview
> 
> In this plunker, when M is closed, P is also 'dismiss' to reveal a 'black screen' instead of displaying P