Modal blocking clicks even after it's closed on mobile

Design help Animations & Interactions
1

I have a bug where I have a bunch of cards that open up in a modal on click. On desktop this works fine, but on mobile, once you open and close a modal you can no longer open any other card modals.

I checked this out on inspector on desktop, where I set it to phone view and I determined that there’s a phantom ‘card’ that still exists over the top of the page even after closing a modal.

Any help is appreciated

Here is my public share link: LINK

staging site link: LINK

2

Hello @Christophtoph
I checked your preview link and I think I found a solution for you:
first of all, go to your close modal animation:

image
image174×550 14.6 KB

right-click on these elements and click on change target:
image
image
in this image select “modal1_component” to reset it again
and in the right side-bar again:
image
change “only parents with this class” to “all elements with this class”

do all of these changes for all of these elements in your close modal animation:

  1. right-click on “modal1_content-wrapper” → change target → select “modal1_content-wrapper” in the navigator panel, and again in the interaction panel, and change class set to “all elements with this class”.
  2. for the last one “hide / show” for “modal1_component”, again right-click → change target → select it again from the navigator panel, and again in the interaction panel, change class set to “all elements with this class”

try this, I think your animation will work perfectly.

3

Thanks @zafremedia this worked perfectly!

1 Like