Interaction Experts, please help with bug with two full screen overlays, separate interactions for opening overlays but shared interaction for closing overlays

Design help Animations & Interactions
1

Interaction experts, please help!

I have an interaction with the goal of two separate full screen overlays for viewing a contact form in the first overlay and map in the second overlay.

The triggers “Message” and “Visit” use their own unique interaction to trigger their respective overlays.

24%20pm
24%20pm1192×556 239 KB

Each overlay has the following structure:

wrapping div

  • close button
  • overlay
    – overlay content

The Close button in both wrapping div shares the same interaction, which targets itself and it’s sibling (overlay).

The interactions work ok independently, but when opening the Message overlay before the Visit overlay causes the close interaction to fail on the Visit overlay.

Here is my share link:

You can reveal the triggers by hovering over “Call or messsage us” green cta to the right of H1.

https://preview.webflow.com/preview/island-healing?utm_source=island-healing&preview=798b096b93ff935da6bd28d9cefa277e

31%20pm
31%20pm1323×573 122 KB
43%20pm
43%20pm1425×481 22.4 KB

Here is my public share link: LINK

2

OK I’ve now solved this.

The issue was I was not hiding/showing the close button in each interaction, so one of the the second opened close button was actually staying in place when it’s non-corresponding overlay was showing.