Hi
I have a navbar with position: fix and a z-index of 1000. When the user pushes the button “Termin vereinbaren” a modal popup appears. The modal has a black transparent background that spans the whole viewport. The background has position fix and a z-index of 1002 and therefore should be overlapping the navbar. But the navbar still overlaps everything and is accessible, which it shouldn’t. I searched the forum for solution and tried everything I could think of but found no solution.
This is the read only link
Here you can preview the website and the behaviour. Just click “Termin vereinbaren”
Thank’s so much for any help
Regards, Angelo
The pop-up modal has a higher z-index but it’s contained within parent elements, which have a lower z.
I’ve move it outside of the parents to show the results in the screen grab below, but I’m confused regarding the trigger. The modal opens when clicking on that button but there’s no interaction applied it. Where is the trigger?
1 Like
Works like a charm. You just made my day! I would have gone crazy about that problem. Thanks so much.
About the trigger: I made a dummy text-link (I revoked it, in case you are interested to see it again) where I applied the popup-toggle class on which the popup reacts. I then aplied that class to the button. This way I can apply it to other buttons which are styled differently as well without repeat the interactions. I then removed the dummy-link but still have the styling with the interactions. Sorry for the complicated explanation, hope it makes sense. Now since I have to move the popup outwards this method only works if you have always the same popup since the interactions now have to apply to “all elements with this class”.
Oh, very cool. I like that arrangement. Thanks for explaining!
