Problem with lightbox style modal *Solved*

Hi, guys!

I made a simple modal interaction which is working fine on all other pages except the “Kalusto” page. https://hollari.webflow.io/kalusto.

The modal’s z-index is set to a whopping 3000, but on this particular page, the modal is hiding behind the navbar and some other elements.

On this page it’s working splendidly: https://hollari.webflow.io/valmiit-kohteet

Dear friends, what should I do?

Here is my public share link: https://preview.webflow.com/preview/hollari?utm_source=hollari&preview=3bdcffc77145dfb1588aca9690a1b7fe

Modal BAD

Modal GOOD

Only thing that got remotely working was giving your navbar a low z-index. Like 10. I don’t know how many other levels of z you have going but when I gave your navbar a z index it allowed the popup to go above it. same thing with reducing the z index on the page content.

I don’t usually use anything above 100 myself and even then not usually that high. But you can set the z-index of your navbar sop I’d play around there.

Jeremy

@jbleroux Thank you for your contribution, but adding a low z-index to navbar doesn’t fix it. The Modal is still hiding behind the navbar and the other elements.

The Modal works perfectly on all other pages except this one. I can’t figure out why.

Hi Samuli, what custom code are you using to get the custom modal to work? I’ve been trying to figure out how to link a dynamic collection with a popup modal. I realize you have been successful. Except for that page. I wonder though if it is something being specified in the code. Is the code being directed at divs elements with the same name? I don’t know because I can’t see your code.

I fixed it!

@jbleroux Thanks for your help. There were some divs with unnecessary z-indexes assigned to them. I set all z-indexes to “auto” except Navbar and Modal, and the Modal works now as it should.

If you’d like to implement similar modal to your site, I’m happy to tell you that there are no tweaks in the code. The modals are simple interactions. I think I learned this from someone in the forum.

This is the same thing done with an older version of Interactions. No code needed.

1 Like

MODAL on page "Valmiit kohteet

1 Like

cool I didn’t think it was possible because of the stacking of the modals on top of each other and unable to control the z-indexes of them. I will take a dive into this. Thank you.

Thank you I figured out what was happening. I hadn’t selected only siblings with this class and instead all elements, so all of the modals were stacking on top of eachother. Which is why I was only ever seeing one collection item. It works perfectly. I think this will make a good tutorial item for Custom modals linked to CMS because it goes way beyond a lightbox.

You can add custom code to your page:

.w-lightbox-backdrop{ z-index:3000; }