Problems with PopUp (floating) Window


We want to have a floating Pop Up window, which loads up when X happens on the page.
With the Window having opaque (see through) window. All is working but 2 things, as you can see here in this sample page:

1- The background opaque (see through) window is not centered on the screen, that is it not equal distance from left and right side of the scree.

2- A DIV which we use for navigational buttons is standing in front of the floating Window. That is those buttons on the right with “About Us”, etc. on them

How do we correct these 2 issues?


Answer to #1
Your CSS for the opaque window should be this,

.detail_pop_back {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 5px;
    top: 5px;
    z-index: auto;
    border-radius: 25px;
    display: block;

Answer to #2
Change line 27 of your /css/dropdown.css to this

z-index: -1;


Thanks. Your suggestion works prefect regarding 1st issue.
However, for 2nd issue we cannot set the dropdown.css to z-index: -1; since by when not covered by the opaque window, which is 99% of the time, we want to have the given z-index. So is there anyway to have the opaque window folating on top of everything below it?


Have you tried setting a z-index on the popup to a larger value such as 50? I’m just wondering what effect your setting it to auto has.

By the way, it’s a bit confusing describing the popup as opaque (see through), since opaque is not see through). Did you mean transparent?

Try z-index: 600; or higher

The navigation has a strange z-index of 597 so your modal needs to be higher than that (598 will do). Although 597 is a silly number because I doubt you have 597 layers on that page :slight_smile:

Do you realise that your content spills out of the modal at smaller screen sizes because you have fixed the height?

1 Like

Yes, setting z-index: 600 fixes the problem!
I need to read up more on this logic of z-index. I mean what is the logic behind these big and bigger numbers for this parameter!

Yes, that z-index of Navigational items is crazy high!
I guess guys who did that either paid no attention as to the real reason behind this value or did not really know about how to set that value right so they just picked a crazy (relatively speaking) high number.

And about content spills on smaller screens, do you means screens of a Mobile phone? If yes, these pages are not designed for Mobile phones per say.

If you think of the webpage as having layers, the higher the z-index, the higher the element is in the pile of layers. So an element with z-index of 10 will sit on top an element with z-index of 5, etc.

Sometimes a developer will give an element a ‘crazy-high’ z-index to make sure that element does not get covered up with other elements with higher z-indexes by mistake.

1 Like

Yes, of course about the z-index description.
Still that developer having given that DIV z-index of 599 was crazy :slight_smile:

But thanks anyway.

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