OnCLick does not work in this interaction

Design help Animations & Interactions
1

Hi,

I have a red and green button. OnClick red button a div block (modal) shows. OnHover green button the div block (modal) also shows. A close button inside the modal closes it.

OnHover (green button) works fine. OnCLick (red button) does not.

It seems very simple. I just can’t get the OnClick to work.

https://webflow.com/design/appetite2?preview=765d05c9fdb802b2eed2c9a65d0d676d

Cheers,
Martin

2

I see nobody has answered. I spend 10mn yesterday on it and couldn’t find… while I was sure If I did it from scratch it would work. Did you figured it out?

3

Hi Vincent,

Thanks for investigating. I haven’t found it yet either. Will report though if I have.

Cheers
Martin

4

Seems to work for me:

http://quick.as/qmzxtqjo

5

@thesergie In your screen cast you click the red button to hide the grey modal. Clicking the red button should show the grey modal.

Update:

If found it. I had a Hide Modal interaction set on the Body (don’t ask why…). Apparently that was blocking the Show Modal interaction that is set to the red button. I can’t explain why. But they seem to conflict. Is it because the red button is actually a transparent div block so both conflicting interactions are fired resulting in nothing?

Cheers,
Martin

6

Yep @MartinB, you are correct. Both body and button click events were firing at once. Perhaps in the future we might consider separating the clicks for nested elements, to avoid confusion.

2 Likes