Skip Navigation

[Resolved] Modal with login form not working properly

This support ticket is created 7 years, 2 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 - -
13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 - -

Supporter timezone: America/New_York (GMT-04:00)

This topic contains 4 replies, has 2 voices.

Last updated by Charles 7 years, 2 months ago.

Assisted by: Christian Cox.

Author
Posts
#559556

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

#559708

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

#559717

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

#559752

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.

#559794

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