[Resolved] Modal with login form not working properly

[Author]

Posts

[Charles]

Support,

I'm trying to add a modal with my login form in the topbar of my website, but the overlay takes over the screen and my form is not showing.

URL: hidden link
(see top right link "login test modal")

Not sure what the problem is?

Thanks,
Chuck

[Christian Cox]

It's a z-index issue. Your #LoginTestModal is set to z-index of 1050 and the .modal-backdrop is set to z-index 1040, but the .x-topbar div has a z-index of 1031. So the .modal-backdrop will always appear above .x-topbar: 1040 > 1031. It doesn't matter what z-index the child nodes of .x-topbar are set to, because this parent element and its child nodes will always appear underneath the modal backdrop.
https://stackoverflow.com/questions/8573686/z-index-between-children-and-parents

[Charles]

Christian,

Thanks. I figured it was Z related. I've tried every option from this thread: https://stackoverflow.com/questions/10636667/bootstrap-modal-appearing-under-background?page=1&tab=votes#tab-top

The only one that worked was setting the backdrop to false; which I would rather not do. Is there another solution that would work?

Thanks,
Chuck

[Christian Cox]

You'll have to change the z-index of each of these elements to work correctly, or move the elements around in your page source. I'm not sure how your code is set up, but is it possible to move the #LoginTestModal element inside the .modal-backdrop element? You could do this with JavaScript before the modal opens, or you could make changes in your code that move this element around in the page source.

Moving an element around probably has the fewest CSS side effects. Modifying all the other elements z-index is likely to have more side effects.

[Charles]

Got it to work, but doesn't work on mobile. Not sure the issue, but going to go a different route.

Thank you for your assistance,
Chuck