feat(modal): enable propagation on underlying page

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

[DwieDima]

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

Thanks a lot!

[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;
}