如何在 ion-tabs [ IONIC 4 ] 后面打开模态

Question

如何显示选项卡后面的模式？目前，即使 z-index 设置为 2 并且选项卡的 z-index 设置为 5，模态也会与所有内容重叠。

How it currently is

How I want it to be

我一直在尝试使用 z-index，但它在模态上不起作用。这是代码：

模态创建

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

模态 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;
  }
 }

离子片 css

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

感谢您的宝贵时间！

Answer 1

我认为您试图通过 z-index 实现的目标是不可能的，因为 ion-modal 元素附加在当前页面之外。但是有一种方法可以解决它。

您可以将背景效果分为两部分：

第一部分是您的浮动按钮，我假设您在选项卡栏中的 ion-tab-button 旁边有它。您可以添加一个 background-color，其颜色与模态上的颜色相匹配，并创建一种具有纯 css 或您正在寻找的确切形状的 teardown 效果为了。那里有很多例子，你可以了解更多here。
第二部分是使用 bottom css 属性.

Answer 2

此答案适用于 Ionic 6，但也许对某人有帮助

您可以使用 Ionic's animation engine 创建一个自定义 enterAnimation，它将首先将 ion-modal 移动到您的用例需要的任何 dom 节点下。有一个叫beforeAddWrite的钩子，专门用来在动画开始前执行DOM操作。相关的代码看起来像这样

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

如何在 ion-tabs [ IONIC 4 ] 后面打开模态

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

modal-dialog

z-index

ionic-framework

angular