Modal Layers not on top of page

[LJLachance]

I have created a page that contains several “mouse over text pop-up descriptions” through the use of modal layers – content box, with orientation set to middle – center. The modal type is jQueery UI and animate is set to “none”. “Position children” is set to “absolute”.

In “Object Manager” for convenience I have all 7 of the modal layers at the end of the list of all my objects (not placed inside the layout grid in which the mouse over is actually contained).

Checking for errors on the page shows no errors found on the page.

The issue – when hovering over the link in preview or on the published site, the modal popups appear but, if there is an image nearby, they appear “UNDERNEATH” the image making them unreadable. AND in only two of them, they appear to shiver, almost an attempt to display but never quite fully pop up to be able to read.

I am unable to find the tutorial for creating these pop up modal layers (I know I’m just missing it) but, can someone tell me why the layers appear UNDER an adjacent image instead of on top of everything? Should the modal layers actually be "inside" the layout grid in which the text is contained? Or is there some sort of "z" factor that I need to know?

Thanks

[Pablo]

To be able to help you with this, I need to see what you have done.
Please always include the URL of the page or a demo project.

[LJLachance]

let's start with the URL and try to avoid sending the project. https://www.lachance.org/oakland.html IF you scroll down the page almost half way, until you see a photo of a church on the right side - you'll find a blue bordered box with the church photo and an image of a ribbon that has the text "Cornerstone Placed" on top of it - In the text description you'll find THE ORIGINAL PONDS CHURCH and in the first paragraph you'll find

In April of 1936, with the aid of WPA funds

- WPA is the modal layer and when it shows, it is underneath the image of the ribbon. If I get an idea of why it's happening here, I can fix the other instances of the same thing.

If this doesn't work, then I'll package it up and send it to you.

Thanks again.

[Pablo]

It is very difficult to make any sense of the HTML with so many elements on the page.
But you can try to add this code to the page HTML (between head tags):

Code: Select all

<style>
.Layer_WPA
{
   z-index: 9999 !important;
}
</style>

[LJLachance]

Sorry - it's a long life I've had - I'm old! <smile> - however, your code works and fixed the problem. Can I simply list each of the modal layers on the page in the same code you have provided? For example:

Code: Select all

<style>
.Layer_WPA
.Layer_modal2 name
.Layer_modal3 name
{
   z-index: 9999 !important;
}
</style>

Thanks for the direction ..

[Pablo]

IDs need to be separated by a comma

Code: Select all

<style>
.Layer_WPA,
.Layer_modal2, 
.Layer_modal3,
{
   z-index: 9999 !important;
}
</style>

[BaconFries]

Almost there you just need to include a comma to separate each

Code: Select all

<style>
.Layer_WPA,
.Layer_modal2 name,
.Layer_modal3 name
{
   z-index: 9999 !important;
}
</style>

[LJLachance]

Searched it and got it, just about the time you replied - many thanks - works great now.