Fix Modal Popup position relative to Modal

Community Usage questions
1

Is it possible to fix the popup of the modal relative to the modal button?

I want to create a submenu that appears to pop out of the modal but if I use on different screen size the popup jumps around, regardless if I use %age of screen or pixels.

Also not sure I’ve fixed the position of the modal yet in my design so ideally I’d like to move it around without having to constantly update the position of the popup.

1 Like
2

It’s not possible with a modal per say, but you could use a simple panel widget instead, whose visibility depends on a toggle button, like in this example session fake_modal.json (3.4 KB). This way you can chose where the panel appears exactly although you won’t get the overlay effect.

Edit: here’s another experiment with an overlay effect behind the modal panel. fake_modal_overlay.json (3.9 KB). The overlay and the close button are clones of the toggle button, which is why clicking on either of them closes the modal.

2 Likes
3

Thanks - will try those suggestions out.

Any chance the relative position functionality will appear in a future release?!..

4

Turns out it was a simple addition to make. included in v1.7.0-beta3.

1 Like
5

Brilliant! Thanks so much!

6

There are still some quirks as of beta3, I had to change it a bit for next release (the relative mode will only apply to the popup’s position, not it’s size)

7

Position only is fine - almost better as maintains flexibility of the actual modal pop up size.

Thanks again!

8

Hello,
I really like the blur effect produced with backdrop-filter: blur(2px);
It works well with the osc app but strangely, it doesn't work ( no blur ) on the web browsers of my ipad (or computer).
Is this normal?

9

According to this, you might need to use the prefixed css property "-webkit-backdrop-filter"

10

:star_struck: :+1: c'est top!

11

To continue the topic, is it possible to write multiple entries in the overlay id field?
Something like @{modal_1}, @{modal_2}, @{modal_3} what would be the right syntax?

12

I don't understand your question, what are you trying to do ?

13

Oops, I made a mistake in the wording of the previous message.
I have several modal widgets in my main window.
For now, following your example, I put @{modal_1} in the visible field of the clone widget (id overlay) which has now : -webkit-backdrop-filter: blur(10px); background:rgba(0,0,0,0.1); in the css. It works great on my Ipad.

I would like to make it so that as soon as I open any modal widget, all the rest of the window goes into blur.

14

Here is another version based on the previous example :
fake_modal_overlay.json (7.4 KB)

I turned the overlay widget into a button (not a clone), its visibility depends on its own value; I used the buttons' and the overlay's script to link their values.

15

so smart, thankyou !