Ionic 5 new style modal

Hello all, I’m trying to get the new style of iOS modal popup shown in the Ionic 5 announcement ( 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?

I figured this out, I missed a whole section of the documentation :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:

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