Streaming live at 10am (PST)

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

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.

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.

Here is my public share link: LINK

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.