Hide my entire app but still have buttons working

Ionic Framework ionic-v3
1

Hi,

I’m a bit of a noob to ionic so this may be a dumb question.

On the press of a button I want to overlay my entire app with a black image (or make everything invisible) but still have the buttons working underneath.

My app is based on the tab sample app.

So far I’ve tried the following

app.scss
.dark-overlay {
background-color: #000 !important;
opacity: 1;
}

my-tab.html

…
<div tappable (click)=“stealthMode()”>

my-tab.ts
stealthMode () {
this.myElements = document.querySelectorAll(“dark-overlay”);
for (var i = 0; i < myElements.length; i++) {
myElements[i].style.opacity = 0;
}
}

Even if i can get this to work it’s not going to be the final answer as setting the opacity in app.scss to 0 still leaves the tabbar visible but I need that to go black too.

Any ideas?

Thanks

2

The opacity won’t get rid of the elements, they are all there, but faded I guess. You can use display: none; to temporary remove them.

3

Hi,

I don’t want to remove any elements just not show them. I have several tappable images that I want to still be available.

But I can try can try

  • display: none;
  • visibility: hidden;
  • opacity: 0;

and see what they all do.

But I have a more fundamental question. How do I update css using typescript in Ionic 2 and apply it to the whole app. Like I said I’m very new to this and I’m struggling with the concepts.

Thanks

4

Anyone with some ideas?

5

For those interested I found a solution at http://stackoverflow.com/questions/42077957/ionic-2-property-binding-to-make-app-invisible