Support

Modal Issue

Posted: March 13, 2019 at 8:04 pm


Michael

March 13, 2019 at 8:04 pm

Hi, I have an issue with the modal for the MER add-on. When I click the ‘Add To Cart’ button, the modal shows up, but I get a overlay that prevents me from clicking anything.

See Screenshot:
https://www.evernote.com/l/APfAMzk2UM5CtprD_9F7GGXYB40x4Niz9Rc

In my inspector, I can see that there is a overlay div with the ID “ee-overlay”. I am assuming ee stands for event-espresso. If I set this to display:none in my inspector, it goes away and everything works.

See screenshot:
https://www.evernote.com/l/APcsLlnI-vRDe7Hqj4ClJRrggem_SiaUFrM

Please advise.

Thanks!


Michael

March 18, 2019 at 10:20 am

Hi… following up. Thanks!


Tony

  • Support Staff

March 19, 2019 at 11:41 am

Hi there,

The reason this is happening is due to the shiftnav plugin wrapping the page content in a div (with a class of shiftnav-wrap) and then setting the z-index of that div to 250 – https://monosnap.com/file/ZxigheHn5CI1iKTzL35jVNO8lZro1c

Child elements can’t have a z-index higher than their parent, so when EE sets the z-index of the cart modal to 10001… its ignored – https://monosnap.com/file/WxMa7ooLDKtfZHV1A0e9htu8crqkw7
(Note I removed the comments around the zindex of 250 to show the above)

The overlay, however, is outside of the shiftnav-wrap div, so it gets its 10000 z-index value applies and displays on top of everything.

You’ll need to prevent that plugin from applying a z-index to everything on the page as nothing can override it.

Just to note, ‘bumping‘ your threads basically puts them back to the back of the queue as we work through threads based on reply date. It’s not always as clear cut as that as sometimes we need to wait on additional feedback, but point being, bumping will usually have the opposite effect than intended 🙂


Michael

March 20, 2019 at 12:41 pm

Thank you for your reply and thanks for the bumping tip.

I have temporarily disabled it with some css until I can reach out to the shiftnav developer:


#ee-overlay{
  opacity: 0 !important;
  z-index: 0 !important;
}

I hope this doesn’t break anything 🙂

The support post ‘Modal Issue’ is closed to new replies.

Have a question about this support post? Create a new support post in our support forums and include a link to this existing support post so we can help you.

Status: closed

Updated by  Michael 5 months, 4 weeks ago ago

Topic Tags

Notifications

This topic is:
pending
Do NOT follow this link or you will be banned from the site!