'How to open modal behind ion-tabs [ IONIC 4 ]

How can I show the modal behind the tabs? Currently the modal overlaps everything even though the z-index is set to 2 and the z-index of the tabs is set to 5.

How it currently is

How I want it to be

I have been trying to use z-index, however it doesn't work on the modal. Here's the code:

Modal creation

const modal = await this.modalController.create({
  showBackdrop: false,
  backdropDismiss: true,
  component: CreateExpenseComponent,
  cssClass: "createExpenseModal",
});
return await modal.present();

Modal CSS (global.scss)

.createExpenseModal {
  position: absolute;
  z-index: 2 !important;
  //--backdrop-opacity: 0 !important;
  .modal-wrapper.sc-ion-modal-ios,
  .modal-shadow.sc-ion-modal-ios {
  z-index: 2;
  position: absolute;
  top: 35rem;
  }
 }

Ion tabs css

 ion-tabs {
  z-index: 5;
  position: relative;
 }

Thank you for your time!

angularionic-frameworkmodal-dialogz-index


Solution 1:[1]

I don't think what you are trying to achive with z-index is possible since the ion-modal element is appended outside of the current page. But there's a way you could work your way through it.

You can divide your background effect in 2 parts:

enter image description here

  1. The first part is were your floating button is, i assume you have it along side the ion-tab-button in the tab bar. You can add a background-color with colors that matches the one on the modal, and create a type of teardown effect with pure css or the exact shape you are looking for. There's a ton of examples out there, you can learn more about it here.
  2. The second part is to position your modal right on top of the tab bar using bottom css property.

Solution 2:[2]

This answer is for Ionic 6 but maybe it helps someone

You can use Ionic's animation engine to create a custom enterAnimation that will first move the ion-modal under what ever dom node is needed for your use case. There is a hook called beforeAddWrite that is specifically for performing DOM operations before the animation begins. The relevant piece of code would look something like this

// rest of animation
.beforeAddWrite(() => {
    const modal = document.querySelector('ion-modal');
    const appTabs = document.querySelector('#bottomNav');
    appTabs.appendChild(modal);
  })

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Dharman
Solution 2

Related Questions