I’m having an issue with popups inside of a query loop. When I trigger the popup it opens, but if I click on the second or third item in the loop, the first popup is loaded behind it and sometimes won’t close unless hitting the escape key.
Here’s a screen capture of my issue
https://jam.dev/c/6530bec3-fb95-4ec6-b908-2350f4d8b897
Here are my interaction settings. On close I’ve also tried it with the target selected as popup and it’s the same result.
Hi Mark,
Thanks for reporting the issue.
Please may I know if you are setting the interaction on the looping div itself?
If so, you have to move it inside the loop (an additional div might be needed).
This is the limitation of the current popup inside a query loop.
Regards,
Jenn
Thanks for your help! It’s actually on a div inside the loop item. I originally had it on the loop div and the same popup opened for all the items. When I moved it inside the correct popup opened but now the first popup is also opening with it. So not sure what the issue is there.
Could you provide a link for that page?
I was just working on a similar interaction feature so thanks for posting this.
Was reading through your details and tried it out on your site but it’s not replicating the same as your video. Curious if you just made a change to the settings?
No I haven’t made any changes. Was it working correctly for you? I’ve tried it on multiple browsers and even my iPhone and had the same issue.
Yes, so I clicked on the three event cards on the homepage then found the page you have with multiple events. It works for all of them (not displaying the first one) - BUT the exit icon didn’t work to close them. I had to click off in the overlay area behind the popup element to close it.
@markballard *wasn’t on a different page - didn’t realize it was an anchored section (section with 5 events shown)
@markballard - Looks like you’ve got it working now 
Refreshed and tested it. Nice looking site btw!
When you pointed that out I clicked on the on the class of the loop container and found there was an interaction tied to the class so that was the issue all along. It’s working correctly now! Thank you!
Thanks! Yeah I’m liking the design too. It’s a first draft so who knows what it will look like after the client comes back with changes. But that’s the fun of web design. Thanks for helping!
You bet! I’ll have to bookmark it and check out the final product!
