Footer interfering with custom javascript modal content

Support
#1

Please check the link http://clarionsmith.com/icfhe_test/icinnovatorclub/ . Here, at the bottom of the page, you will find “Open Modal” link. Click that which opens a modal with some information. Now without scrolling the modal, scroll down till you reach the footer area. Now you can see that the footer content is overlapping with the modal content. Need a fix for this please.

If you have trouble fixing it, could you show me another way to do that using elements in the X theme?

Thanks.

#2

Hi,

To fix it, you can add the code below in Theme Options > CSS

body .x-colophon {
    position: relative;
    z-index: 0;
}

Hope that helps.

#3

Hello,

That worked. Now please check http://icfhe.in/icinnovatorclub/ . In this, every image has a popover enabled either to its right or left depending on the alignment. Now the problem here is, the popovers are overlapping with the other images in the same rows and columns. Could you provide a fix for this?

Thanks.

#4

Hi There,

Can you please use this css for the popover and let us know how this goes.

.popover {
 z-index: 9999 !important;
}

Hope this helps!

Thanks

#5

Hello,

Still no luck. The problem still persists.

#6

Please provide us your login details to check what could be the issue.
Please send us the details in a secure note.

Thanks

#7

Sent the login details via secure note. Please check.

#8

Hi There,

I have added following CSS and its working fine now.

#x-content-band-3 .x-column .popover,    #x-content-band-4 .x-column .popover {
 z-index: 99999 !important;
}
    #x-content-band-3 .x-column:hover,   #x-content-band-4 .x-column:hover {
  z-index: 99999 !important;
}

Please check and let us know.

Thanks

#9

Thank you @basanta. This is nice.

#10

You’re welcome.

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.