Ionic-framework: feat(modal): enable propagation on underlying page

[DwieDima]

Feature Request

Ionic version:


[x] 5.1.0

Describe the Feature Request

It would be great if when opening a modal you could still edit the underlying page without the opened modal closing.
This is especially useful if you define a modal that has a height of less than 100%.

Describe Preferred Solution

The modal controller could be extended by the property: propagate: boolean.

.ts

  public async onOpenModal() {
    const modal = await this.modalController.create({
      component: ModalPage,
      propagate: true,
      cssClass: 'sheet-modal',
    });
    return await modal.present();
  }

.scss

.sheet-modal {
  position: absolute;
  display: block;
  top: calc(100% - 200px);
  --height: 200px;
}

Additional Context

I have managed to create a sheet modal, but not that the underlying page can be edited:

.ts

  public async onOpenModal() {
    const modal = await this.modalController.create({
      component: ModalPage,
      showBackdrop: false,
      backdropDismiss: false,
      cssClass: 'sheet-modal',
    });
    return await modal.present();
  }

.scss

.sheet-modal .modal-wrapper {
  position: absolute;
  display: block;
  top: calc(100% - (200px));
  --height: 200px;
  --border-radius: 10px 10px 0px 0px;
  --box-shadow: 0px -0.5px 2px 1px rgba(0, 0, 0, 0.1);
}

result
the goal of this example is to be able to continue scrolling the map while the modal remains open.
Currently, only the modal content can be edited

[liamdebeasi]

Thanks for the feature request. I think the proper solution to this is https://github.com/ionic-team/ionic/issues/21039, but to get this to work with ion-modal, the only thing your code is missing is setting pointer-events: none on the ion-backdrop within the modal and ion-modal so that you can interact with the underlying page.

[liamdebeasi]

Here is a CodePen example: https://codepen.io/liamdebeasi/pen/GRpByOd

Notice that you can interact with the page underneath the modal.

[DwieDima]

Thank you @liamdebeasi!
This is now working on my use case, but it broke my other default modals (they get dismissed on any click).
Is there a way to apply the missing css only to specific modal?

ion-modal,
ion-modal ion-backdrop {
  pointer-events: none;
}

[liamdebeasi]

Your original example provides a custom CSS class sheet-modal, so just target that instead:

.sheet-modal,
.sheet-modal ion-backdrop {
  pointer-events: none;
}

[DwieDima]

Oh wow, that simple.
Now its working as expected!
Took me hours!

Thanks a lot!

[DwieDima]

Okay, that didn't quite solve it.
If I set pointer-events: none, I can't click the ion-content of the modal. Instead, it propagates through the parent page.

is there a solution to this?
I've been hanging here for days 😞

[DwieDima]

ok i finally solved it by simply adding following css properties to the .scss file of the page:

ion-header,
ion-content,
ion-footer {
  pointer-events: visiblePainted;
}

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.