Multiple modals with one set of interactions?

Hey team,
I’m trying to design a staff page where thumbnails have a hover overlay, and when clicked their bio appears in a modal. I was hoping to have one set of interactions (hide on load & trigger) that I could apply to all the modals by having them apply only to the child of trigger class.

As you can see in the link, the subsequent thumbnails are overlapping the modal. I think this is because the modal wrapper (with fixed position and z-index of 9999) is within a parent with a Z-index of 1, it’s displaying below the subsequent elements in the stack. Any suggestions on how to make this work without pulling the modal wrappers out of the parent and creating separate sets of interactions for each of the dozen staff members?

Any help would be appreciated. Thanks,

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Looks like I’ve got it figured out. Just needed to remove the z-index value from the parent div.

1 Like