Open Modal at click position

Hi Cwicly Community,
is it possible to open a modal exactly / or at the boundingbox-edges where the a) the click appeared (mouse x/y coordinates) or b) at the x/y-edges at the element which was clicked? or maybee both ways…of course i ask if this is possible via the Cwicly UX / Concept…without or with minimal coding…
best wishes
timo

hi Timo. If you know the position of the item that triggers it, you can simply apply those as margin/padding to the modal, have you tried that?

So if your triggering element is on the right side with top and right margin/padding of 30, you can apply that margin/padding to the modal and make it appear on top of it.

Lmk if this is what you mean with your question

hi boris,

i mean it more generic…if we scroll down for example then those magin/paddings from any “side” are not enough…i just want to make sure no matter on which device this is clicked it just should open from that element which was clicked based on the “responsive” size of that element…i know how to achideve this with pure javascript in a ease…but i want to stick more to the Cwicly UX so i want to achieve this without coding here…
best wishes
timo

i see! to be honest i would not know how to do this with cwicly.

What is inside your modal? Otherwise perhaps popover or tooltip hotspot could be something? those open always on the element that they’re placed on

its my navigation :slight_smile:

As @boris mentioned, depending on your use case perhaps a Popover block is better suited for this.

ok lemme check :slight_smile: thanx

do you mean navigation menu? is that not always in the same spot on the screen?

yes i mean MENU element…no it depends on your html context setup…it can be anywhere…

could you maybe send a link or screenshot?

sure

https://mastava.de/

1 Like

wow! love what you made here. I’m assuming you want the modal of the menu button always at exactly the same place as the menu button?

thanx boris and it was done very quick with less time :slight_smile: we will optimize it and make it much more awesome with more content and some effects…thanx! yes you are right

1 Like

what i would suggest with my limited knowledge is more of a workaround; make sure that your menu icon stays at the same location when switching to tablet and mobile. this way you can use exactly those paddings for the modal that will then always seem to appear on top of it.

this website of mine has the same margins for desktop and tablet, so everything basically stays the same as you shrink the window

https://noorderkerkconcerten.nl/

As mentioned already, I also suggest the Popover block, since it will always be placed relative to the trigger element.

No margin/padding hacks, the position and offset can be defined with available options.

image

ok thx we will test that…but now we came to the conclusion that the actual is fine…because if the screen ois bigger the menu is on the left which is nice…but if the screen is more narrow the space may not be sufficient if it was opened a bit more to the right…so here it can self-adjust so to say…