如何在Ionic 2中创建一个覆盖页面？

Question

如何在进入新页面时创建一个透明的指南叠加页？

我如何在ionic 2中实现？

- sridharan

---

显然有一个 Cordova 插件可以做到这一点，https://github.com/souly1/ng-walkthrough。我找了好一会儿才找到！ - JackDev

Answer 1

你可以在<ion-content>之外创建div：

<div class="my-overlay" padding [hidden]="overlayHidden">
    <button full (click)="hideOverlay()">Click me</button>
</div>

使用CSS：

.my-overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  z-index: 20;
  top: 0;
  left: 0;
}

在类声明中添加（在构造函数之前）：

    overlayHidden: boolean = false;

并且（在构造函数之后）：

public hideOverlay() {
    this.overlayHidden = true;
}

- edi_smooth

---

谢谢。这个导览页面安装后只会显示一次。如何循环显示该标记？ - sridharan

我不确定我是否理解正确。您想仅显示一次 - 可能是在第一次应用程序运行时。只需使用http://ionicframework.com/docs/v2/native/nativestorage/来存储数据即可。 - edi_smooth

我使用了这个解决方案，但它将允许背景上的滚动事件，有什么想法吗？ - alexalejandroem