Click to add an “
Open overlay” interaction. Two options will be shown:
- Close when clicking outside
- Add background behind overlay
(see screenshot in the end)
Add background” only has the option to add a color.
Add background” also allows to add a blur effect to the layer on the background.
Frame1contains the overlay content
Frame0to take the full size of the screen
- Make it so that “
Open overlay” targets
- Manually position
Frame1(the overlay content) inside
- Add the desired background color and blur to
The “Close when clicking outside” functionality is lost since
Frame0takes up the whole screen.
Manually adding an on-click “
Close overlay” interaction to
Frame0would not work as intended.
This is because the entire
Frame0would respond to the click, not just the part of
Frame0that is not covered by
Frame1. More specifically, any part of
Frame0which does not consume the on-click event (a button inside
Frame1would consume it) will trigger the “
Close overlay” interaction.
Note: adding an on-click “
None” interaction to
Frame1does not consume the on-click event.
Left: existing functionality (no blur but
"Close when clicking outside" works)
Center: desired functionality (blur but
Back button is the only way to close overlay)
Right: relevant options menu