Ionic 5: Modal over modal is missing ion-backdrop

[Daveshirman]

Q) Why is my ion-backdrop + modal shadow styling not working when I open a modal on top of another modal?

PREFACE: This was working fine with V4, but broken on the upgrade to V5. I don’t want to change my page approach, just fix the CSS/whatever is actually causing the issue below.

1. My app opens a modal page with custom css to make it full screen.
2. I can then open another normal modal (but not full screen) over the top.

• This 2nd modal is missing the ion-backdrop and its border shadow styling.
• I can see the ion-backdrop is definitely in the DOM, but it’s obviously not showing.

Step 1 looks fine:

Step 2 - broken ion-backdrop:

Showing my custom modal:

  async showClipboard() {
    const modal = await this._ModalController.create({
      component: ClipboardPage,
      cssClass: 'custom-round-modal',
      componentProps: {
        user: this.user
      },
      showBackdrop: true
    });
    await modal.present(); 
  }

The CSS:

@media only screen and (min-width: 768px) {
  .custom-round-modal {
    .modal-wrapper {
      border-radius: 15px !important;
      -moz-border-radius: 15px !important;
      -webkit-border-radius: 15px !important;
      .ion-page {
        border-radius: 15px !important;
        -moz-border-radius: 15px !important;
        -webkit-border-radius: 15px !important;
      }
    }
  }
}

Thanks.

[FelipePintoB]

I was looking for the same issue, some suggest to handle this with .css styles over some classes you can check here.

For me only worked using the element ion-backdrop in the html. So in html for my first modal I use ion-backdrop with the directive *ngIf, then ion-backdrop only shows when I call the function that shows the second modal. I used something like this:

In the first modal that is a full screen modal:

<ion-content>
    <ion-backdrop *ngIf="activeAditionalBackdrop"></ion-backdrop>
    <ng-container>
        <ion-slides pager="true" style="margin: 0;" mode="ios">
            <ion-slide *ngFor="let element of shopProduct?.id_image; let i = index">
                <div style="width: 100%; height: 300px;" class="imgCenter" (click)="openCompleteView()">
                    <img class="p-shadow-7" style="background-color: white;" [src]="element.image_idimage.url" [alt]="shopProduct.name">
                </div>
            </ion-slide>
        </ion-slides>
        <ion-row>
            <ion-col size="12">
                <h6 style="color:black; font-weight: 600; margin: 1px; margin-right: 27px; margin-left: 12px">
                    {{shopProduct.name}}
                    <img *ngIf="announcementImage" [src]="announcementImage" alt="tiket" style="position: absolute; z-index: 10; height: 2.2vh; margin-left: 5px;">
                </h6>
                <h6 style="color:var(--gris-zaito-5); font-weight: 500; margin: 0; margin-left: 12px">{{ shopProduct?.mark }}</h6>
            </ion-col>
        </ion-row>
    </ng-container>
</ion-content>

In the TS of the first modal I call the second modal like this:

  async openPrice() {
    const modal = await this.modalController.create({
      component: ValuePage,
      cssClass: "modal-value",
      swipeToClose: true,
      animated: true,
      showBackdrop: true,
      componentProps: { shopProduct: this.shopProduct, type: this.type }
    });
    this.activeAditionalBackdrop = true;
    modal.onWillDismiss().then( data => {
      this.activeAditionalBackdrop = data.data;
    });
    return await modal.present();
  }

When I finished using the second modal and I want to close it, I call a function like this:

  dismmisModal() {
    this.modalController.dismiss(false);
  }

The css in the component for the first modal is:

ion-backdrop {
    opacity: 0.3;
    height: 100%;
    position: fixed;
    touch-action: none;
  }

I hope this will be helpfull for some

[henriquesoaresg2]

I solved the issue adding the following css into global.scss file in ionic v7:

ion-modal.modal-default.show-modal:last-of-type {
    --box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4) !important;
    --backdrop-opacity: var(--ion-backdrop-opacity, 0.32) !important;
}

[laban405]

Thi is the correct answer