Ionic 5 new style modal

Ionic Framework
1

Hello all, I’m trying to get the new style of iOS modal popup shown in the Ionic 5 announcement (https://ionicframework.com/blog/announcing-ionic-5/) with the pseudo 3d effect.

I have swipeToClose set to true, as well as defining a presentingElement, but still get the old-style modal on iOS.

  async presentModal() {
    const presentingElement = await this.modalController.getTop();
    const modal = await this.modalController.create({
      component: ModalPage,
      swipeToClose: true,
      presentingElement: presentingElement
    });
    return await modal.present();
  }

What am I missing?

2

I figured this out, I missed a whole section of the documentation https://ionicframework.com/docs/api/modal#swipeable-modals :man_shrugging:

I was setting the presenting element to the top-most modal, but only had one modal.

So now: presentingElement: this.routerOutlet.nativeEl works a treat :rainbow:

3

Great you solve it. Just to let you know: maybe you want to open a Modal from a Service later. There the this.routerOutlet.nativeEl doesn’t work. So you can use this Workaround: Ionic 5 Create Modal from Service with presentingElement

1 Like