Javascript / JQuery - Dynamically generated divs (wrap) on my page I can't change or apply style

Question

I have this page where I tried to create a on page pop-up for an image using JS/JQuery, following this example ( http://www.jqueryscript.net/lightbox/Simple-jQuery-Plugin-For-Opening-A-Popup-Window-On-Page-load.html ).

Although I succeeded on it, when I try to implement it on my customer page, some divs are on front of my pop-up, no matter how high I configure the "z-index" for it. Also, these divs seem to be dinamically generated, as they have the "wrap" id div around that I can't find on my .php file for this page.

So, no matter what I do, these images are on front of my pop-up (except if I remove them using the "Inspect element" tool or change the z-index on them with Inspect Element, changing the inline style for this automatically generated "wrap" div).

This is the page without any changes on "Inspect Element", the white image boxes with the red arrows are the problem here (they belong to the page under the pop-up and I need them to be under the pop-up): http://imgur.com/waB1igo

This is what happens if I change the z-index of the automatically generated div "wrap" that I can find searching the code with "Inspect element" for one of the boxes (the first one): imgur.com/lDk1eRA

So, any of you guys have a tip for me on how to solve this problem?

I've already tried to create new css rules for this div or the img's tags, using the "!important" and these kind of things, without result.

Thanks very much in advance and sorry for english errors, Matheus Barreto.

Answer 1

You might want to try setting the position property of the overlay to absolute . Images that have their positions set to absolute will get on top of everything that is not set to position absolute or fixed which can be very annoying. You might need to work around a bit with centering it or other issues that come from setting its position to absolute but this should work.

Answer 2

Try to make sure your overlay DIVs are outside wrappers, inside the </body> tag, before closing scripts... If the DIV is inside another that has a lower z-index, it won't "pop out" of it.

Also, you may try really high z-index , such as 8000 or higher. You should be able to use up to 65535 (higher depending on the browser's implementation).

It's worth noting that you should have a plan for z indexes of fixed/absolutely positioned items.