Streaming live at 10am (PST)

Popup Modal help!

Hi all,

I’ve created a CMS collection grid of a group of individuals, and when clicking on one it pops up a modal to display more info (bio, etc) about that person.

Modal works fine (opens and closes ok, and has the correct data), but the problem is that the modal ‘tucks’ behind the remaining CMS list of people after the one I click on.

I’m sure it’s just a setting or something, but could sure use some help if you’ve run into this before!

Thanks!

Gene

Can you please provide your read-only link so I can take a look at the site in question? Chances are this is just a z-index issue but without something specific to look at I won’t know for sure.

Sure Mike, thanks! I’m new to this so any advice/guidance is much appreciated!

https://preview.webflow.com/preview/jazz-party?utm_medium=preview_link&utm_source=designer&utm_content=jazz-party&preview=4caa8e2668b06d0762b541b66ccc9750&mode=preview

Thankfully this is pretty straightforward, you just need to remove the z-index on your collection list wrapper, collection list, and collection item elements. You can see that setting all of those to auto fixes the issue:

I didn’t record it in my short video above, but I’d recommend also adding an interaction to the ModalDiv element so users can close the popup by clicking anywhere outside of the ModalPopup element.

Let me know if you have any issues!

Mike,

Thank you so much! I was pulling my hair out trying to figure it out…such a simple fix!

Much appreciated!

Gene

No problem, glad I could help!

Assuming you don’t have any other questions, would you mind marking my post as the solution? That lets other community members know the problem has been sorted out. Thanks!

You got it! Thanks again!