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

Question

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

我的模态css是

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

请帮忙。

EDIT 我的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;
}

模态应为全屏，不显示导航栏。