Modal Layers not on top of page

Issues related to hyperlinks and web site navigation.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/links.html
Post Reply
LJLachance
 
 
Posts: 115
Joined: Sun Feb 04, 2018 8:19 pm
Location: Jacksonville, FL
Contact:

Modal Layers not on top of page

Post by 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
User avatar
Pablo
 
Posts: 21508
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Modal Layers not on top of page

Post by 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
 
 
Posts: 115
Joined: Sun Feb 04, 2018 8:19 pm
Location: Jacksonville, FL
Contact:

Re: Modal Layers not on top of page

Post by 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.
User avatar
Pablo
 
Posts: 21508
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Modal Layers not on top of page

Post by 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
 
 
Posts: 115
Joined: Sun Feb 04, 2018 8:19 pm
Location: Jacksonville, FL
Contact:

Re: Modal Layers not on top of page

Post by 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 ..
User avatar
Pablo
 
Posts: 21508
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Modal Layers not on top of page

Post by Pablo »

IDs need to be separated by a comma

Code: Select all

<style>
.Layer_WPA,
.Layer_modal2, 
.Layer_modal3,
{
   z-index: 9999 !important;
}
</style>
User avatar
BaconFries
 
 
Posts: 5316
Joined: Thu Aug 16, 2007 7:32 pm

Re: Modal Layers not on top of page

Post by 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
 
 
Posts: 115
Joined: Sun Feb 04, 2018 8:19 pm
Location: Jacksonville, FL
Contact:

Re: Modal Layers not on top of page

Post by LJLachance »

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