How to Show or Hide overlays on a page, or within another overlay

Some buttons are not necessary 100% of the time. If you create a pop-up overlay, you can choose when those extra buttons are in view, and hide them when they are no longer needed. Follow the steps below to create a toggled overlay.

Process

There are two separate options for creating a show/hide overlay. We will explain both options in this thread. Before either option can be created make sure these steps are followed first

  1. Launch builder
  2. Add an Overlay to a page
  3. Add button widget within the page

Using multiple widgets to show/hide an overlay

Add a second button to hide the overlay

Double click on your Show button and click the + icon

Choose the option to add an Update Property

Drag the frame name from the left pane to the target widget in the properties window below the center pane NOTE make sure to not single click on the name of the frame, doing so will change the properties window to the properties of the frame and not the update property

_Successfully dragging the frame to the target widget will change the Update property information within the center pane and property sections

Change the target property to Hidden

Repeat above process for your Hide button, or Copy/Paste the Update property from the top center pane

  1. Single click the update property and use keyboard shortcut to Copy (Ctrl + C or command + c)
  2. Double click on the Hide button
  3. Paste the update property into the top center pane (Ctrl + V or command + v)
  4. Click on the box to add a check to the property value – this indicates the overlay will be hidden upon pressing pressing this button

Using Toggle Property within a single show/hide button

Change the name of the Show button to Show/Hide (optional)

Double click on the show/hide button and click on the + sign

Choose the option to add a toggle property

Click and drag the frame name from the left pane to the target widget field of the properties window NOTE make sure to not single click on the name of the frame, doing so will change the properties window to the properties of the frame and not the update property

Successfully dragging the frame to the target widget will change the information in the top center pane and properties window

Select the Hidden target property

Done

Save and Publish your changes. Test your work within the interface

Revision: 1
Last modified: Jul 31, 2017

Feedback

Was this helpful?

Yes No
You indicated this topic was not helpful to you ...
Could you please leave a comment telling us why? Thank you!
Thanks for your feedback.

Post your comment on this topic.

Post Comment