how to i make a pop up screen

How-to Discussions
1

how do i make a little see-through square come up on the screen when you press a button kinda like this but see through and black.

https://www.google.co.uk/search?q=app+pop+up&biw=1024&bih=582&source=lnms&tbm=isch&sa=X&ved=0CAYQ_AUoAWoVChMI5ZOK26DqxgIVMiDbCh13nwbj#imgrc=_WSAtFr8ZE9CYM%3A

2

Hi,

Just make a <Panel>, e.g.

<WhileTrue Value="{popup_visible}">
    <Panel Width="200" Height="200">

    </Panel>
</WhileTrue>

Then in JS:

var popup_visible = Observable(false);

To show the popup:

popup_visible.value = true;

Remember to add popup_visible to module_exports

3

thank you so much and what do you mean by module_exports

4

You can also make the popup appear in a more fancy way, e.g.

<Panel ux:Name="popup" Width="200" Height="200" Opacity="0">

</Panel>

<WhileTrue Value="{popup_visible}">
    <Change popup.Opacity="1" Duration="1" />
</WhileTrue>
5

can you show mw how this would be structured in an app because i cant seem to get it to work for some reason nothing comes up

6

It’s probably that “Nothing” comes up because the panel is empty. Try giving it a background, for example

<Panel Background="#f00" ...
7

sorry, it works now thanks :slight_smile: and how can i make it see through a bit.

8

Give it some alpha,

<Panel Background="#0008" />

The last component 8 is the alpha channel (RGBA)

9

You can also use Opacity:

<Panel Background="#000" Opacity="0.5" />

This will make everything inside the panel transparent too

10

alright thank you for everything anders :slight_smile: