如何在 Ionic2 中创建自定义全屏模式

Question

我想在 Ionic2 中创建自定义全屏加载器组件。但我的模态 div 不覆盖标题/导航栏区域。我希望它像 Ionic LoadingComponent 一样覆盖我的应用程序中的所有内容，并且还有我的模板变量。请看图。

我的模态 CSS 是

#modal{
  width: 100%;
  height:100%;
  position: absolute;
  z-index: 100;
  background: red;
  top: 0px;
  left: 0;
}

请帮忙。

编辑 我的 ModalPage 有导航栏

<ion-header>
<ion-navbar primary>
    <button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Hello Ionic</ion-title>
  </ion-navbar>
</ion-header>

编辑

我找到了解决方法。我只使用 Ionic2 Popover，Popover 提供 100% 宽度+高度，全屏。我在按钮单击时调用了模态弹出框，并在 100% 下载时将其关闭。

Answer 1

您不需要该样式规则来使模式变为全屏。请看this plunker。

就像你可以看到的那样，HomePage 包含一个导航栏，但ModalPage html 代码只是

<ion-content></ion-content>

这样，只需更改background-color

ion-page.modal-page ion-content {
  background-color: red;
}

模式应该是全屏的，不显示导航栏。