Upvote 1

Creating a pop up window

Known Adele Delignette.darsonval 3 years ago

Hi, I need make a pop up window that show the settings of a specific element. I tried to make it by creating a table and hiding it using the hiding button in the layers palette, and then making a button to reveal it. I also want the pop up window to go away if the user clicks on anything else.

Hiding the element doesn't work when I play the simulation.

Replies (3)
photo
1

Hello Adele, I have created an example that I hope will be useful, the interaction of showing a hidden attribute can be attached to an element "on mouse Click" like in this example, where when pressing another element of the canvas not only shows an element but also hide another one, note that you can also perform the same action "on mouse Toggle" that will show a hidden element in one click and the second click will reverse the action. Let me know how it goes and if there is anything else I can help you with.

Greetings.

photo
1

I do this a lot in my wireframes. A few pointers:

  • When designing your popup use a dynamic panel to hold all of your content. Make sure to add a white background and a border to the panel.
  • Set the panel to be hidden by default
  • When designing the panel, I usually place it on the side or below the rest of my content.
  • To show the popup I use a combination of events that always include move and show actions. This way I can place the popup in the correct location. You don't *need* to use the move action, but if you don't then your popup will always in in front of your content as you are designing, which is annoying.
  • You can dynamically populate the popup based on content in your wireframe using 'set value' events. This is very powerful when used with data tables, as you can populate the content based on content in specific cells the user clicks on.
  • There is no clean way to handle your requirement of hiding the popup when the user clicks 'anywhere else'. I just always add a close button in the popup. This close button includes a hide event.

See attached example

photo
1

Thanks Will for this information!!

Greetings.

Leave a Comment
 
Attach a file